SummArg | Cursos y recursos para webmasters

24/02/2012

Colocar ventanas tipo modal con un poco de jQuery

Una “modal window” es una ventana que se abre dentro de la estructura de nuestro sitio y se caracteriza por oscurecer el resto del área visible para centrar la atención en él y por ser generada vía javascript con alguna animación fade. Existen decenas de plugins para insertar ventanas modal en cualquier website, pero en esta oportunidad queremos compartir con ustedes un modo simple que sólo utiliza jQuery y el resto está a la vista para que ustedes lo modifiquen a su necesidad.

Por defecto utilizaremos un anchor, pero bien puede adaptarse para que funcione con un input type=”button” o directamente un tag button. No olviden linkear jQuery en el <head> del documento.

<a href="#dialog" name="modal">Clickear para ver una bonita modal window</a>

Y debajo colocamos el código de la ventana.

<div id="modalBoxes">
<div id="mask"></div>
<div id="dialog" class="window">
<b>Test</b> |
<a href="#" class="close">Close</a>
</div>
</div>

Y antes del cierre de la etiqueta </body> colocamos:

<script type="text/javascript">
 $(document).ready(function() {
 $('a[name=modal]').click(function(e) {
 e.preventDefault();
 var id = $(this).attr('href');
 var maskHeight = $(document).height();
 var maskWidth = $(window).width();
 $('#mask').css({'width':maskWidth,'height':maskHeight});
 $('#mask').fadeIn(1000);
 $('#mask').fadeTo("slow",0.8);
 var winH = $(window).height();
 var winW = $(window).width();
 $(id).css('top', winH/2-$(id).height()/2);
 $(id).css('left', winW/2-$(id).width()/2);
 $(id).fadeIn(2000);
 });
 $('.window .close').click(function (e) {
 e.preventDefault();
 $('#mask, .window').hide();
 });
 $('#mask').click(function () {
 $(this).hide();
 $('.window').hide();
 });
 });
 </script>

El div con id “mask”, será el encargado de expanderse a lo alto y ancho de la pantalla y oscurecer el contenido que deseamos que no sea destacado. En el CSS especificaremos:

/* Modal window */
#mask {
 position:absolute;
 z-index:2000;
 background-color:#000;
 display:none;
 top: -60px;
}
#modalBoxes .window {
 position:absolute;
 width:440px;
 height:200px;
 display:none;
 z-index:9999;
 padding:20px;
}
#modalBoxes #dialog {
 width:375px;
 height:203px;
 background:white;
 border: 5px solid #557db8;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Resultado:

Dejar un comentario