ventana modal con html, css y jQuery

   Intentaré explicar cómo crear, sólo con CSS, HTML y un poco de jQuery, un tipo de esas ventanitas que no nos permiten pinchar fuera de ellas hasta que las cerremos. Con que hechéis un vistazo al post anterior ya está más de la mitad del trabajo hecho. En dicho post ya expliqué cómo crear la ventana (un div oculto), posicionarla y darle forma con css y abrirla y cerrarla con jQuery, pero, ¿cómo evitar que se pinche fuera de ella?. Lo más sencillo que he encontrado para ello es lo siguiente: (la ventana a abrir será el formulario de correo que comenté en el post anterior el cual os aconsejo tenerlo abierto)

Colocar el siguiente div en el html de nuestra página:

<div id="fondoformulario"></div>

cuyo css será el siguiente:

#fondoformulario {
    position:absolute;
    top:0px;
    left:0px;
    width:100%; /*ocupará todo el ancho de nuestra página*/
    height:1860px; /*le damos el alto de nuestra página*/
    display:none; /*en principio será oculto*/
    background:url(images/imagen.png) repeat; /*la imagen de fondo*/
    z-index:4000; /*tendrá valor menor que el formulario y mayor que todos los demás divs*/
}

   Como podéis intuir, la forma de evitar que se pinche fuera del formulario es abrir un div de fondo que contiene una imagen. La imagen deberá ser semitranparente, dando la sensación de que lo que está detrás se oscurece un poco pero dejando ver el contenido de la página. Al colocar una imagen detrás del formulario, esta impedirá que se pueda pinchar en los enlaces que tengamos (yo creé un cuadrado de 100x100 px. con el Gimp). Es importante el z-index del css. Tenemos que dar un z-index mayor a la ventana que queremos en primer plano, menor al fondo semitransparente y menor aún a los divs del resto de la página.

   Ahora vamos a darle un efecto, sencillo, con jQuery, parecido al tintineo que hace la ventana  cuando pinchamos fuera de ella. El código podría ser algo como:

<script type="text/javascript">

$('#fondoformulario').click(function() {
    if ($('#formulario').is(':visible')){
        $('#formulario').fadeOut(20).fadeIn(20).fadeOut(20).fadeIn(20).fadeOut(20).fadeIn(20);
    }
    });

</script>

Este código viene a decir lo siguiente: cuando pinchemos en el div "fondoformulario" y, si el div "formulario" está visisible, lo hacemos desaparecer y aparecer varias veces.

   Ahora, para mostrar el fondo de la ventana, sólo tendremos que añadir $('#fondoformulario').css('display','block') a la línea de código que ya os comenté en el anterior post. Y $('#fondoformulario').css('display','none') cuando se cierre la ventana.Ya sabéis que si tenéis alguna duda dejadla en los comentarios y la contestaré.