Las ventanas modal están adquiriendo cada vez más popularidad debido a su creciente uso en webs como WordPress, que han demostrado sus beneficios en cuanto a usabilidad dentro de aplicaciones online.
Pero aunque parezca un recurso reservado a grandes aplicaciones, lo cierto es que implementar ventanas modal es más sencillo de lo que parece. Aquà les indicamos en pocos pasos cómo crear una ventana modal utilizando jQuery.
El jQuery selecciona todas las etiquetas anchor con atributo rel configuradas en “modal” y toma el id DIV definido en el href para mostrarlo como una ventana modal.
En este sitio se está usando facebox (inspirado en facebook). Otros, como lightbox, thickbox, multibox, litebox poseen caracterÃsticas diferentes.
Este ejemplo te mostrará cómo crear una ventana modal que mostrará el contenido de de un DIV #ID.
Objetivos
- Poder buscar en el documento HTML completo una etiqueta REL= de atributo “modal” para que cuando los usuarios hagan clic en ella, se muestre el contenido del #ID DIV en el atributo HREF de la ventana modal.
- Crear una máscara que llene la pantalla completa.
- Crear una ventana modal fácil y simple de modificar.
Código HTML y atributos de etiqueta A
- <!-- #dialog es el id de un DIV definido en el código que está a continuación -->
- <a href=â€#dialog†name=â€modalâ€>Simple Modal Window</a>
- <div id="boxes">
- <!-- #Aqui personalizas tu ventana modal -->
- <div id="dialog" class="window">
- <b>Testeo de la Modal Window</b> |
- <!-- el botón close está definido como clase close<a href="#" class="close">Close it</a>
- </div>
- <!-- No elimines el div#mask, porque lo necesitarás para rellenar la pantalla -->
- <div id="mask"></div>
- </div>
Código CSS
- <style>
- /* Z-index of #mask must lower than #boxes .window */
- #mask {
- position:absolute;
- z-index:9000;
- background-color:#000;
- display:none;
- }
- #boxes .window {
- position:absolute;
- width:440px;
- height:200px;
- display:none;
- z-index:9999;
- padding:20px;
- }
- /* Customize your modal window here, you can add background image too */
- #boxes #dialog {
- width:375px;
- height:203px;
- }
- </style>
JavaScript
- <script>
- $(document).ready(function() {
- //select all the a tag with name equal to modal
- $('a[name=modal]').click(function(e) {
- //Cancel the link behavior
- e.preventDefault();
- //Get the A tag
- var id = $(this).attr('href');
- //Get the screen height and width
- var maskHeight = $(document).height();
- var maskWidth = $(window).width();
- //Set height and width to mask to fill up the whole screen
- $('#mask').css({'width':maskWidth,'height':maskHeight});
- //transition effect
- $('#mask').fadeIn(1000);
- $('#mask').fadeTo("slow",0.8);
- //Get the window height and width
- var winH = $(window).height();
- var winW = $(window).width();
- //Set the popup window to center
- $(id).css('top', winH/2-$(id).height()/2);
- $(id).css('left', winW/2-$(id).width()/2);
- //transition effect
- $(id).fadeIn(2000);
- });
- //if close button is clicked
- $('.window .close').click(function (e) {
- //Cancel the link behavior
- e.preventDefault();
- $('#mask, .window').hide();
- });
- //if mask is clicked
- $('#mask').click(function () {
- $(this).hide();
- $('.window').hide();
- });
- });
- </script>
Es bastante directo y fácil de entender. Recuerda que debes incluir el framework jQuery.
Conclusión
SÃ, eso es todo lo que necesitas para realizar una simple ventana modal con jQuery. En este tutorial, se muestra el concepto de cómo mostrar contenido DIV dentro de una ventana modal. Sin embargo, puedes desarrollarlo todavÃa más para aceptar un link y mostrarlo en un iFrame o una galerÃa de imágenes.
Fuente: Queness
Martes, 5 de mayo de 2009 a las 20.09
Hola, la pregunta es la siguiente: si yo quiero lanzar una ventana modal despues de realizar cierto codigo; es decir, que la ventana se muestre sin necesidad de darle click a nada, como se harÃa esto???
Jueves, 29 de octubre de 2009 a las 14.23
hola!, una consulta con que versión de jQuery trabaja tu ejemplo?
Sábado, 12 de diciembre de 2009 a las 19.12
Hola, una consulta, tu codigo lo he adaptado para un modulo de drupal y todo ese codigo està dentro de un bloque de drupal. Pero al momento de ejecutar la ventana modal no me cubre toda la pantalla, si no que solo aparece dentro del bloque de la pagina de drupal. Nose si me dejè entender. Gracias
Lunes, 14 de diciembre de 2009 a las 11.11
No termino de comprender tu consulta…
Martes, 15 de diciembre de 2009 a las 01.07
me uno a la duda que hizo felipe, en mi caso tengo esto, un formulario de contacto, este internamente valida los datos, si estan correctos lo manda a un php que a su vez lo manda a mi correo, el caso es que cuando ya envio los datos tengo un alert que informa al usuario que sus datos han sido enviados satisfactoriamente, lo que deseo es cambiar este alert tradicional por una ventana modal que se dispara solo cuando los datos han sido enviados y no cuando un boton o link es presionado, si alguien tiene idea de como hacerlo le agradecere bastante
Domingo, 17 de enero de 2010 a las 15.35
Buenas … como puedo mostrar la modal al hacer click en el boton enviar de un formulario?
Lunes, 18 de enero de 2010 a las 10.59
RESPUESTAS PARA TODOS:
Si se fijan, la ventana modal es accionada por una función de javascript (jQuery). La función trabaja con el clic en los anchors con el nombre “modal”.
Para usar una ventana modal en otros casos, deben modificar la función que dice qué tipo de evento dispara la ventana. Por ejemplo, si quisieran mostrarla al cliquear el botón “enviar” de un formulario, serÃa algo asÃ:
$("#submit").bind("click",function(){
//mostrar la ventana modal
});
PAra los que tienen problemas porque la ventana modal no se ejecuta en la totalidad de la página (si he entendido bien), chequeen que no se esté cargando desde un iFrame y me cuentan.
¡Saludos!
Lunes, 8 de marzo de 2010 a las 15.31
no funciona, no funciona
Lunes, 17 de mayo de 2010 a las 16.01
No podrias Poner un ejemplo con una llamada desde un boton por que no logro modificar bien el java Script para que funcione del mismo
Desde ya muchisimas gracias
Jueves, 27 de mayo de 2010 a las 16.45
Hola, en el ejemplo se hace referencia a una parte dentro del mismo documento HTMLSimple Modal Window, que será la parte que luego se mostrará dentro de la ventana modal.
Mi duda es saber si es posible enlazarlo con otra página, de forma que el contenido de la ventana modal no esté en el mismo HTML. He probado varias cosas pero sin éxito. Tengo que cambiar el fichero Javascript??
Muchas gracias de antemano.
Lunes, 19 de julio de 2010 a las 20.06
Me dá problemas el construir,
No era más facil, si se trata de ayudar a los qu no sabemos,
de poner un download.
Gracias
Miguel
Miércoles, 11 de agosto de 2010 a las 17.44
al final del codigo html dice esto Close it si se fijan bien antes de eso hay un comentario que no cierra, lo cierran con –> o lo eliminan y les funcionara el evento modal, lo que me pasa es que al hacer click sobre cualquier parte de el se cierra :S
Domingo, 22 de agosto de 2010 a las 16.08
HOLA AL MOMENTO DE HACER REDIMENSION EN LA PANTALLA NO SE LLENA POR COMPLETO CON LA MASCARA.
Lunes, 18 de octubre de 2010 a las 13.46
mi pregunta la ventana modal sirve para todos los exploradores alguien me puede enviar de como hacerlo para mozilla
gracias..
Lunes, 25 de octubre de 2010 a las 08.03
No me extraña que no sepas resolver las dudas, como que has copiado el código de aquÃ:
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Pro lo menos, cita la fuente…
Lunes, 25 de octubre de 2010 a las 22.30
@Ignacio: La fuente está citada al pie del artÃculo, y ha estado asà desde el primer dÃa en que el artÃculo fue escrito. Si te fijas en los comentarios, verás también que las consultas fueron respondidas en la medida de lo posible.
Domingo, 7 de noviembre de 2010 a las 16.32
Gracias funciona de la patada
Miércoles, 9 de febrero de 2011 a las 20.38
hola no consigo que funciona, lo he puesto tal como pones pero nada de nada
Lunes, 28 de febrero de 2011 a las 16.48
Hola ya me di cuenta que desde un iframe no se cubre toda la pantalla, pero mi pregunta es que si no hay una forma de lograrlo? lo que pasa es que el cliente que me lo pide necesita que sea asi. Algun tip? se agredecera cualquier apoyo
Domingo, 13 de marzo de 2011 a las 10.28
[…] http://www.desarrolloweb.com/articulos/select-dinamico-javascript.html Ventana modal: http://www.elwebmaster.com/articulos/ventana-modal-con-jquery-en-3-pasos nyroModal: http://pixelcoblog.com/crea-ventanas-modales-en-tus-paginas-con-nyromodal/ $.get $.post […]
Jueves, 15 de diciembre de 2011 a las 13.46
la forma seria de generar una ventana que se habra automaticamente es con la opcion del jquery de $(windows).ready(function(){aqui va la funcion que se realizara cuando se haga la carga });
Viernes, 23 de diciembre de 2011 a las 03.39
Yo creo que es un gran aporte, y basado en esta idea es que hice una ventana para mostar los saludos navideños en una ventana que se carga apenas entran a mi blog, y que le añadi un cokie, para que solo se muestre la primera vez que entran, si les interesa, pueden dar una vistaso en este link : http://blog.rogersoto.com/blog/programacion/abrir-una-ventana-al-cargar-el-blog/
muchas gracias.
Miércoles, 1 de agosto de 2012 a las 08.18
Funciona lo de que me aparece la ventana modal, pero mi problema es que tengo una lista de links (la cual es dinámica) que tienen el mismo identificador y al pulsar en cualquiera de los links lo que me aparece es la información del primero y lo que querÃa era que apareciese una información diferente para cada uno. Alguien sabe como solucionarlo?
Gracias
Lunes, 17 de diciembre de 2012 a las 08.15
Las ventanas modales usando DIVS y jQUERY son importantes porque no se bloquean como si fuesen pop-ups (que es lo que antes se usaban para mostrar ventanas emergentes y que ahora no son permitidos por los navegadores).
Domingo, 6 de enero de 2013 a las 18.55
Tengo un problema con la ventana modal, lo que deseo es algo mas o menos parecido a esto: http://www.ninfaz.com/ este es el ejemplo perfecto de lo que deseo, y ya que mi pagina web trata sobre el mismo tipo de contenido es precisamente el mismo efecto que deseo lograr en el index de mi web.
Agradezco de ante mano la ayuda que a bien tengan brindarme.
Saludos.
Miércoles, 9 de julio de 2014 a las 20.57
Hola, … soy novato en esto de la programación web… espero me puedan ayudar, hice una ventana modal sencilla que muestra un mensaje automáticamente al abrir o acceder al sitio con un botón para cerrarla, el problema es que cada ves que ingreso a la pagina principal “Ãndex” desde el botón “home” o al regresar la pagina se sigue mostrando, quiero que solo se muestre una sola vez cuando se ingresa por primera vez, no se si se puede lograr esto, ojalá me puedan ayudar se los agradecerÃa mucho, de antemano gracias.
Martes, 6 de octubre de 2015 a las 23.00
Muy bueno, funciona de maravilla!!