Micaela 9 de abril de 2009 a las 09.03
   Imprimir artículo
elWebmaster.com

Ventana Modal con jQuery en 3 pasos


Diseño, tutorial, jQuery, ventana modal, window

modal_windowLas 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

  1. 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.
  2. Crear una máscara que llene la pantalla completa.
  3. Crear una ventana modal fácil y simple de modificar.

Código HTML y atributos de etiqueta A

  1. <!-- #dialog es el id de un DIV definido en el código que está a continuación -->
  2.     <a href=â€#dialog†name=â€modalâ€>Simple Modal Window</a>
  3.  
  4.     <div id="boxes">
  5.  
  6.     <!-- #Aqui personalizas tu ventana modal -->
  7.  
  8.     <div id="dialog" class="window">
  9.     <b>Testeo de la Modal Window</b> |
  10.  
  11.     <!-- el botón close está definido como clase close<a href="#" class="close">Close it</a>
  12.  
  13.    </div>
  14.  
  15.    <!-- No elimines el div#mask, porque lo necesitarás para rellenar la pantalla -->
  16.     <div id="mask"></div>
  17.     </div>

Código CSS

  1. <style>
  2.  
  3. /* Z-index of #mask must lower than #boxes .window */
  4. #mask {
  5.   position:absolute;
  6.   z-index:9000;
  7.   background-color:#000;
  8.   display:none;
  9. }
  10.  
  11. #boxes .window {
  12.   position:absolute;
  13.   width:440px;
  14.   height:200px;
  15.   display:none;
  16.   z-index:9999;
  17.   padding:20px;
  18. }
  19.  
  20.  
  21. /* Customize your modal window here, you can add background image too */
  22. #boxes #dialog {
  23.   width:375px;
  24.   height:203px;
  25. }
  26. </style>

JavaScript

  1. <script>  
  2.  
  3. $(document).ready(function() {    
  4.  
  5.     //select all the a tag with name equal to modal  
  6.     $('a[name=modal]').click(function(e) {  
  7.         //Cancel the link behavior  
  8.         e.preventDefault();  
  9.         //Get the A tag  
  10.         var id = $(this).attr('href');  
  11.      
  12.         //Get the screen height and width  
  13.         var maskHeight = $(document).height();  
  14.         var maskWidth = $(window).width();  
  15.      
  16.         //Set height and width to mask to fill up the whole screen  
  17.         $('#mask').css({'width':maskWidth,'height':maskHeight});  
  18.          
  19.         //transition effect      
  20.         $('#mask').fadeIn(1000);      
  21.         $('#mask').fadeTo("slow",0.8);    
  22.      
  23.         //Get the window height and width  
  24.         var winH = $(window).height();  
  25.         var winW = $(window).width();  
  26.                
  27.         //Set the popup window to center  
  28.         $(id).css('top',  winH/2-$(id).height()/2);  
  29.         $(id).css('left', winW/2-$(id).width()/2);  
  30.      
  31.         //transition effect  
  32.         $(id).fadeIn(2000);  
  33.      
  34.     });  
  35.      
  36.     //if close button is clicked  
  37.     $('.window .close').click(function (e) {  
  38.         //Cancel the link behavior  
  39.         e.preventDefault();  
  40.         $('#mask, .window').hide();  
  41.     });      
  42.      
  43.     //if mask is clicked  
  44.     $('#mask').click(function () {  
  45.         $(this).hide();  
  46.         $('.window').hide();  
  47.     });          
  48.      
  49. });  
  50.  
  51. </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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (27)

  1. Felipe dice:
    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???

  2. NOE dice:
    Jueves, 29 de octubre de 2009 a las 14.23

    hola!, una consulta con que versión de jQuery trabaja tu ejemplo?

  3. Jose dice:
    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

  4. Alejandra dice:
    Lunes, 14 de diciembre de 2009 a las 11.11

    No termino de comprender tu consulta…

  5. Christian dice:
    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

  6. Vicente Soto Liemann dice:
    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?

  7. Juan Manuel dice:
    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!

  8. mike dice:
    Lunes, 8 de marzo de 2010 a las 15.31

    no funciona, no funciona

  9. Pablo P dice:
    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

  10. Alex dice:
    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.

  11. Miguel dice:
    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

  12. George dice:
    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

  13. ESCRONO dice:
    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.

  14. vinicio dice:
    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..

  15. Ignacio dice:
    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…

  16. Morton dice:
    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.

  17. Jorge dice:
    Domingo, 7 de noviembre de 2010 a las 16.32

    Gracias funciona de la patada

  18. Carlos dice:
    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

  19. Fernando dice:
    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

  20. Ajax | PerfilDeBecario dice:
    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 […]

  21. victor angel chambi nina dice:
    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 });

  22. Roger dice:
    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.

  23. Marta dice:
    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

  24. Soltronica dice:
    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).

  25. Carlos Contreras dice:
    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.

  26. Eduardo dice:
    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.

  27. Jose dice:
    Martes, 6 de octubre de 2015 a las 23.00

    Muy bueno, funciona de maravilla!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder