Borchani.COM – Blog

Se trata de una propuesta para escribir las propiedades CSS que consiste en ir de fuera hacia dentro

1. Comportamiento: display, overflow, clear
2. Posición: position, float, top, left, …
3. Tamaño: width, height
4. Márgenes y bordes: margin, border, padding
5. Texto: font, text, …
6. Fondos y colores: background, color

fuente: marcos de miguel

jCharacterfall es pequeño y entretenido juego hecho en JavaScript y la librería jQuery. El juego tiene dos niveles (fácil y dificil) y consiste en pulsar la tecla correcta según el carácter que apareza en pantalla, en forma de gotas, antes que toque fondo. El nivel de dificultad aumenta mientras más aciertos tengas. Un divertido juego que nos demuestra lo que se puede lograr con JavaScript y jQuery.

fuente : ribosomatic

Empecemos con definir los procesos de la ventana.

• Cuando se quiera mostrar la ventana, el fondo se volverá semi-opaco y resaltará la ventana modal (lo clásico) y su contenido.
• Mantener la ventana modal en el centro de la pantalla.
• Permitir cerrar la ventana.
• Permitir configurar su contenido y dimensión.

modal.css

Especificamos los caracteristicas de diseño. Vamos a usar dos clases 1) .bgtransparent, es para el fondo semi-opaco y 2) .bgmodal, es para la ventana en si.

.bgtransparent{
        position:fixed;
        left:0;
        top:0;
        background-color:#000;
        opacity:0.6;
        filter:alpha(opacity=60);
}

.bgmodal{
        position:fixed;
        font-family:arial;
        font-size:1em;
        border:0.05em solid black;
        overflow:auto;
        background-color:#fff;
}

Ahora la parte de JavaScript que explicaremos en cada línea de código:

modal.js

$(document).ready(function(){
        //parametros principales
       
        var contenidoHTML = ‘<p>Tu contenido HTML aqui</p><button onclick=\”closeModal()\”>Cerrar</button>’;
       
        var ancho = 600;
        var alto = 250;

        $(‘#button’).click(function(){
                // fondo transparente
                // creamos un div nuevo, con dos atributos
                var bgdiv = $(‘<div>’).attr({
                                        className: ‘bgtransparent’,
                                        id: ‘bgtransparent’
                                        });
               
                // agregamos nuevo div a la pagina
                $(‘body’).append(bgdiv);
               
                // obtenemos ancho y alto de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();
               
                //establecemos las dimensiones del fondo
                $(‘#bgtransparent’).css(“width”, wscr);
                $(‘#bgtransparent’).css(“height”, hscr);
               
               
                // ventana modal
                // creamos otro div para la ventana modal y dos atributos
                var moddiv = $(‘<div>’).attr({
                                        className: ‘bgmodal’,
                                        id: ‘bgmodal’
                                        });    
               
                // agregamos div a la pagina
                $(‘body’).append(moddiv);

                // agregamos contenido HTML a la ventana modal
                $(‘#bgmodal’).append(contenidoHTML);
               
                // redimensionamos para que se ajuste al centro y mas
                $(window).resize();
        });

        $(window).resize(function(){
                // dimensiones de la ventana del explorer
                var wscr = $(window).width();
                var hscr = $(window).height();

                // estableciendo dimensiones de fondo
                $(‘#bgtransparent’).css(“width”, wscr);
                $(‘#bgtransparent’).css(“height”, hscr);
               
                // estableciendo tamaño de la ventana modal
                $(‘#bgmodal’).css(“width”, ancho+‘px’);
                $(‘#bgmodal’).css(“height”, alto+‘px’);
               
                // obtiendo tamaño de la ventana modal
                var wcnt = $(‘#bgmodal’).width();
                var hcnt = $(‘#bgmodal’).height();
               
                // obtener posicion central
                var mleft = ( wscr - wcnt ) / 2;
                var mtop = ( hscr - hcnt ) / 2;
               
                // estableciendo ventana modal en el centro
                $(‘#bgmodal’).css(“left”, mleft+‘px’);
                $(‘#bgmodal’).css(“top”, mtop+‘px’);
        });
       
 });
       
function closeModal(){
        // removemos divs creados
        $(‘#bgmodal’).remove();
        $(‘#bgtransparent’).remove();
}

Ahora para aplicarlo bastará con lo siguiente:

<html>
<head>

<link type=“text/css” rel=“stylesheet” href=“modal.css” />
<script type=“text/javascript” src=“jquery-1.2.3.min.js”></script>
<script type=“text/javascript” src=“modal.js”></script>

<title>Modal JavaScript</title>
</head>

<body>
        <input type=“button” id=“button” value=“Mostrar Ventana” />
</body>
</html>

fuente:  ribosomatic