Popup me con jQuery

Crea tus propios popups o ventanas modales utilizando las tecnologías jQuery, HTML y CSS para personalizarlos al máximo posible. Popup jQuery.

Este tipo de ventanas modales se pueden emplear para mostrar una fotografía, texto, un formulario o lo que se te ocurra.

En el ejemplo vamos a ver como abrir una ventana modal utilizando fadeIn() y cerrarla utilizando fadeOut(), funciones disponibles utilizando la librería jQuery.

Lo primero que deberemos hacer es incluir la librería jQuery y los scripts que realizarán la función.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
    $('#open').on('click', function(){
        $('#popup').fadeIn('slow');
        $('.popup-overlay').fadeIn('slow');
        $('.popup-overlay').height($(window).height());
        return false;
    });
 
    $('#close').on('click', function(){
        $('#popup').fadeOut('slow');
        $('.popup-overlay').fadeOut('slow');
        return false;
    });
});
</script>

El script lo que hace es esperar a que se haga click en un link con id=”open” abriendo con el efecto que ofrece la función fadeIn otro contenedor con id=”popup” que inicialmente está escondido con display:none.

También tenemos controlado el evento para cerrar la venta. En este caso, cuando se pulsa en la “x” (enlace con id=”close”, en el caso del ejemplo), la ventana modal se cierra y la opacidad que se aplica al cuerpo de la página desaparece.

Ahora dentro del <body>, justo antes de la etiqueta de cierre </body> añadimos el código HTML que representa nuestro popup tal como sigue:

<div id="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close"><img src="images/close.png"/></a></div>
        <div>
        	<h2>Contenido POPUP</h2>
            <p>Lorem Ipsum...</p>
            <div style="float:left; width:100%;">
    	</div>
        </div>
    </div>
</div>
<div class="popup-overlay"></div>

El código anterior puedes depositarlo al inicio del <body> o al final y representa la ventana modal. Necesitarás algunos estilos para darle algo de presentación. En el ejemplo en funcionamiento estamos utlizando los siguientes estilos:

#popup {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
}
 
.content-popup {
    margin:0px auto;
    margin-top:120px;
    position:relative;
    padding:10px;
    width:500px;
    min-height:250px;
    border-radius:4px;
    background-color:#FFFFFF;
    box-shadow: 0 2px 5px #666666;
}
 
.content-popup h2 {
    color:#48484B;
    border-bottom: 1px solid #48484B;
    margin-top: 0;
    padding-bottom: 4px;
}
 
.popup-overlay {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    display:none;
    background-color: #777777;
    cursor: pointer;
    opacity: 0.7;
}
 
.close {
    position: absolute;
    right: 15px;
}

El #popup es la clave del asunto ya que con sus propiedades se superpone al resto de la página como si estuviera flotando por encima.

Ver demo Descargar

Esta entrada ha sido actualizada el 14/09/2018.

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (37 votos, promedio: 4,84 de 5)
Cargando…
Comparte en las redes sociales

68 respuestas a “Popup me con jQuery”

  1. elkin dice:

    Muchas gracias por el ejemplo, me ha sido de gran utilidad para basarme en un desarrollo que tengo pendiente.
    un saludo

  2. Sid dice:

    Muchas gracias por tu código.
    Le he encontrado un problema: funciona bien cuando tienes un único enlace a la ventana modal. Pero cuando hay más de uno, no funciona bien:

    Link 1
    Link 2
    Link 3

    ¿Alguna idea?

    • alb dice:

      para poner varios en una misma pagina solo cambiale el id de este ejemplo que es open, le pones nombres distintos a los otros links y ya

  3. Sid dice:

    Ups, olvidé la etiqueta code para el ejemplo. Perdón.

    Link 1
    Link 1
    Link 1

    • Jose Aguilar dice:

      Si tienes varios links yo lo que haría es cambiar el código que abre y cierra los popups

      $(‘#popup’).fadeIn(‘slow’); por
      $(‘.popup’).fadeIn(‘slow’);

      Modificar los estilos y al link ponerle un class=”popup”

  4. Rodrigo Betancourt dice:

    podrias pasarme la libreria del jquery

  5. Marcos dice:

    Hola,

    Muchas gracias por tu aportación. Tengo una duda, además se puede hacer que al abrir el PopUp el resto de la página tenga opacidad?

    Gracias!

  6. Marcos dice:

    Hola,

    Muchas gracias por tu aportación. Tengo una duda, además se puede hacer que al abrir el PopUp el resto de la página tenga opacidad?

    Gracias!!

    • Jose Aguilar dice:

      si se podría hacer aplicando los estilos necesarios. Lo podrias hacer con jquery añadiendo algo así al pulsar el link:

      $(‘body’).css(‘opacity’, 0.7);

      o añadiendole una imagen opaca:

      $(‘body’).css(‘background-image’, ‘images/imagen_opaca.png’);

      No se si funcionará, todo es probar.

  7. Jorge Gortari dice:

    Hola estimado soy nuevo en esto del jquery, pero al usar tu metodo me funciono muy bien hasta que trate de hacer varios pop up en una sola pagina, ya que me abre el mismo pop up.

    Podrías guiarme un poco para ver como lo puedo hacer?

  8. Jorge Gortari dice:

    Estimado me resulto todo bien, pero cuando trato de hacer varios pop up dentro de una misma pagina no me resulta.
    Primero le cambié al script todos los id por class:

    $(document).ready(function(){
    $(‘.open’).click(function(){
    $(‘.popup’).fadeIn(‘slow’);
    });

    $(‘.close’).click(function(){
    $(‘.popup’).fadeOut(‘slow’);
    });

    });

    Al hacer click en cualquier link con class=”open” toma el div con class=”popup” que se encuentra más abajo.

    Estoy un poco perdido, puedes ayudarme a solucionar esto?

  9. Javier dice:

    Hola genio, tengo una consulta, lo puse en práctica para colgar peliculas argentinas en mi blog. Hasta ahí me resulto de diez, ahora bien, el problema es que si cierro la pelicula sigue corriendo..
    como puedo hacer para que este al cerrar se detenga!

    Muchas Gracias y espero tu respuesta!

    Un Abrazo!!

    • Jose Aguilar dice:

      En el código jquery que se ejuta al cerrar (#close) deberás investigar como cerrar la película también mediante jQuery. De todas me resulta extraño que la película siga corriendo si el div se ha escondido. Tendría que probarlo.

  10. Pilar dice:

    Buenas tardes, primero muchas gracias por el código me ha sido de mucha ayuda, pero me gustaría saber si el evento del pop-up se puede
    programar para que aparezca solo una vez, o con algún condicional por ejemplo me registro y ya no aparece más.Teniendo en cuenta que la plataforma que estoy usando es Prestashop Muchas gracias.

  11. Mabel Zea dice:

    Gracias por tu codigo, es de gran utilidad, lo unico :(, es que me paso lo mismo que Jorge Gortari.

    Muchas gracias por la ayuda.

  12. ornella dice:

    Estimado,
    muchas gracias por el codigo… lo voy a poner en practica

  13. aleon dice:

    Como puedo actualizar el contenido de popup.. es decir.. al hacer click en el enlace de la ventana principal pasarle un parámetro he imprimir este parámetro dentro del popup

    La impresión desde “PHP”

    echo $variable;

    gracias, Saludos

  14. aleon dice:

    gracias por responder.

    Lo he solucionado así, tal vez no me explique bien

    en la etiqueta <a href….. le coloque un id a cada etiqueta <a>

    y en jquery

    bbbb id=$(this).attr(\"id\");
    $.ajax({
    type: \"GET\",
    url: \"modules/dashboard/ajx_pop.php?id=\" + id,
    data: dataString,
    success: function(data) {
    $(\"#capaContent\").html(data);
    }
    });

    con esto ya me muestra en el popup el valor recuperado jquery..

    mi problema ahora es que parece se pierde la libreria jquery.. el direccionamiento no funciona como espero.. es decir cuando abro el popup despues de este codigo… el boton cerrar del popup deja de funcionar, no me marcar error el firebug. pero el boton no hace nada..

    como puedo solucionarlo

  15. Erick dice:

    Buenas, tengo una duda, a mi me sucede lo mismo que dijo Sid, tengo varios links y por cada link quiero abrir el popup, pero cuando lo intento solo lo abre una vez. Le agradecería si me pudieras ayudar. Muchas gracias.

  16. Erick dice:

    Ya lo solucioné, gracias.

  17. Cristian dice:

    Muchas gracias, esta muy bueno el contenido.

    Una pregunta, ¿como podría abrir la capa desde el body?, el propósito es que habrá la capa al cargar la página.
    He probado con un lo ca ti on . h ref pero no logro aplicarle el estilo para que abra.

    Muchas gracias

    saludos

  18. ccj dice:

    Excelente aporte y funcional

  19. Peter dice:

    Hola quisiera saber si se puede abrir un popup dentro de otro/ejemplo me abre un popup y en ella tengo una grilla y quiero que al momento de seleccionar una celda me abra otro popup/ se podra?

  20. Aradia dice:

    hola!
    segui el ejemplo pero no salio,
    copie el codigo fuente directo de la pagina
    le cambie el nombre de las imagenes por otras que tenia y sigue sin salir,
    el problema que tengo es que en lugar de abrir una capa en la misma pagina se abre en otro link y ocupa toda la pagina, porque me sale eso?

  21. eduardo dice:

    alguien tiene este ejemplo ya funcionando y que este colgado en algun servidor para poder descargarlo, porque ami no me funciona no lo supe aplicar.

    Gracias

  22. veronica luna dice:

    Hola, muy bueno el post, el ejemplo esta muy claro, y me fue de gran utilidad, le felicito por su post y le animo a seguir publicando ya que es de mucho beneficio para programadores que inician, jejje
    saludos y bendiciones

  23. Ignacio dice:

    Es muy bueno tu trabajo, además sos un capo respondiendo.

    Una pregunta, (lo busqué y nadie preguntó) yo quiero que se habra solo cuando cargas la página.

    Cómo hago?????

    Muchas gracias y feliz año

  24. Sabino dice:

    Muy buen Post. Buena información, muy bien explicado. Lo probaré. Ví el ejemplo y me parece muy bueno. ¿Sería posible hacerlo responsive?

  25. vladimir dice:

    Muchas Gracias!!!!

  26. Luisedo dice:

    Hola, tengo la misma pregunta que realizo Peter en el 2013, podrias darme la respuesta? Muchas gracias !!

    Quisiera saber si se puede abrir un popup dentro de otro/ejemplo me abre un popup y en ella tengo una grilla y quiero que al momento de seleccionar una celda me abra otro popup/ se podra?

  27. Dolores Montiel dice:

    He estado buscando como poder realizar un popup y el tuyo es genial, te agradezco mucho la ayuda, pero veo la información se encuentra en el mismo html, intente ubicar el link del html que quiero que abra, pero no lo logre.

    $(‘#open2’).click(function(){
    $(‘videos/video.html’).fadeIn(‘slow’);
    //$(‘body’).css(‘opacity’, ‘0.5’);
    return false;
    });

    Podrías ayudarme?

    Gracias

  28. raul dice:

    hola antes que todo gracias por tu post, me reulto muy util en mi sitio ya que soy nuevo con JQuery.
    ahora solo tengo lo siguiente: estoy creando el mismo link y el codigo correspondiente a su popup uno por cada elemento que tengo dentro de un ciclo for en php, elemplo:

    for(elemento in result)
    Detalles

    Contenido POPUP
    elemento.foto
    elemento.descripcion

    end for

    en el primer elemento me muestra su foto y su descripcion muy bien, pero cuando voy a los detalles del segundo elemento en adelante me esta cargando la foto y los detalles del primer elemento, sin embargo con firebug cada popup toma el valor que debe tomar pero al usuario se le esta mostrando siempre la foto y los detalles del primer elemento.

    en el codigo javascrip cambie $(‘#open’) por
    $(‘.open’) para que me saliera el popup en cada elemento

    ahora la pregunta es:
    como puedo hacer que en cada popup dentro del for se me cargue con los valores que debe y me los muestre??

    de ante mano muchas gracias y espero entiendas este trabalenguas y me puedas ayudar.
    Salu2

    • Jose Aguilar dice:

      Hola,

      Yo creo que necesitarás identificar cada contenedor que hace de popup con un identificador único en la página y que cada enlace que lo abre trabaje con el class como bien dices pero creo que te falta añadir como atributo data el identificar del popup para que cuando hagas click en el enlace puedas capturar el data para abrir el popup correspondiente.

      Saludos

  29. ismael roldan dice:

    Hola que tal, estoy intentando crear 2 pop-up en la misma pagina.Uno con un formulario para registrarse y otro con un formulario para iniciar sesion. El problema es que el segundo pop-up no se muestra al hacer clic, sino que tengo que hacer clic en el primero para que se muestre junto con este.

    Puedes verlo en la web http://www.frasestwitter.org , echale un vistazo y haber si puedes decirme donde esta el fallo, porque copio y pego tal cual tu ejemplo.

    Muchas gracias de antemano

  30. nadia dice:

    Hola! Primero que nada, muchas gracias por tu aporte, es de mucha ayuda!
    Necesito consultarte si vos podrás ayudarme con dos problemas que tengo.
    El primero es que intento opacar el fondo cuando abre el popup, seguí tus indicaciones que diste más arriba, pero no logro hacerlo, hay alguna otra manera?
    Y el otro problema es que intento linkear un video de youtube que abra como popup desde el menu principal, pero tampoco lo logro. Podrás ayudarme?
    saludos

  31. Rodrigo Rojas dice:

    Estimado José:

    El pop up diseñado por ti, me ha funcionado impecable, en chrome y exlplore, habia visto algunos parecidos pero solo me funcionaban en chrome.

    Mis felicitaciones por la calidad de tu trabajo y gracias por compartirlo con los demás.

    Quiero hacerte 2 consultas:

    Tengo una tabla que se autogenera con el contenido de una base de datos access, y en una de las celdas, tengo que levantar un pop up, para lo cual utilicé tu diseño, pero aquí me surge el problema, solo me levanta el popup en la primera linea de registros, en las siguientes no lo levanta y no he podido averiguar el por qué.

    La otra consulta, dentro del popup, tengo que mostrar datos, y como deducirás deben ser datos distintos dependiendo de la línea de la tabla en que abra el popup, es decir me debe cargar, por ejemplo, rut, numero id, etc., datos que tento en una consultas, pero no sé como pasarlos a la tabla del popup, si me pudieras indicar cómo pasar estos parámetros, te lo agradecería mucho.

    Agradeciendo de antemano tu respuesta.

    Atentamente,

    Rodrigo

  32. Jaider dice:

    Buenas tardes, gracias por tu aporte excelente, y como seria el codigo si quisiera que el pop up aparezca ni bien cargue la página y solo este habilitado el botón para cerrar.

    Muchas gracias

  33. Erick Matla dice:

    Excelente!!!

  34. Raphael Rodrigues dice:

    Muy buen aporte, una consulta como puedo poner una restriccion tipo el popup solamente abre cuando presiona el boton cuando rellenar un campo obligatorio de la web

    Saludos Muchas Gracias

  35. algoeraello dice:

    Hola, sabes si se podria implementar esto en wordpress y como podria hacerlo?? porque estoy intentando abrir una pagina wordpress (la pagina de condiciones de uso para ser mas explicito), al pulsar en el elemento del menu correspondiente pero no encuentro ningun plugin que haga exactamente esto, hay muchos de fancybox,.., pero eactamente que se abra la pagina en porup al pulsar el elemnto del menu exactamente.

    Muchas gracias

    • Jose Aguilar dice:

      Hola, si en wordpress se puede adaptar todo. Si tienes idea de maquetación con html, css y ademas jquery no deberías tener muchos problemas.

  36. Sarita dice:

    Muchas gracias, me fue muy util.

  37. Antonny k. dice:

    Muy bueno, gracias por la inspiración. 😀

  38. Jhonatan Américo Saavedra Ricoc dice:

    Buenazo! Muchas gracias!

  39. Ricardo dice:

    Buenos días Jose,

    Antes de nada, quisiera darte las gracias por tus aportaciones, son muy buenas.

    Te comento, en mi código tengo montado una array() para cargar los datos de los clientes y en cada uno de ellos le paso las variables del cliente para que luego pueda recuperarlos y poder mostrarlos en el pop up, el problema que tengo que solo me muestra el primero, me puedes ayudar?

    Adjunto el punto de código donde realizo la carga

    0 ) {
    foreach($cliente as $fila){
    $num=$num+1;
    ?>
    <tr class=>
    getId()?>
    getNombre()?>

    <a data-toggle="modal" data-target=".bs-example-modal-lg" id="open" href="busqueda_clientes.php?id=getId()?>&tipo=2″>

    ….

  40. David dice:

    Como puedo hacer que cargue despues de 30 segundos…

  41. Alonso dice:

    Gracias hombre, tu web me ha servido de mucho.

  42. Luis Benavides dice:

    Muchas gracias 5 años después tu entrada me ayudo en el desarrollo de mi software

  43. Edwin Ramirez dice:

    Muchas Gracias me ayudaste bastante. Estuve tratando de usar varias soluciones pero para mi proyecto no aplicaban. tuve que irme por lo basico para tratar de adaptarlo.

  44. Karen dice:

    muchas gracias por compartir, excelente tutorial, me ha sido muy util

  45. Ismael González dice:

    Muchas Gracias por el aporte esta genial,

    Solo una consulta el boton de close no sirve, tengo una lista de 7 nombres personas a los cuales al dar click muestra la biografia de cada una. abre y funciona bien pero el boton cerrar o la x close para cerrar esta ventana no funciona en orden ascendente. Ejemplo

    Nombre 1 No sirve
    Nombre 2 No sirve
    Nombre 3 No sirve
    Nombre n.. no Sirve
    Nombre 7 Si sirve

    Al dar click al ultimo nombre si sirve el boton y si voy al nombre 6 ya sirve y asi en retroceso en ese orden….

    Como puedo hacer para que funcione desde cualquier nombre sin que se vaya en algun orden.

    • Jose Aguilar dice:

      Hola,

      Creo que lo puedes solucionar fácilmente. Este artículo está pensado para un solo popup por página pero si quieres tener varios debes hacer varios cambios:

      1) Al enlace con id=”close” que contiene la imagen de cerrar debes quitarle este identificador y poner class=”close”.
      2) La captura del evento click del elemento close debes cambiar a este formato:

      $(‘.close’).click(function(){
      $(‘#popup’).fadeOut(‘slow’);
      $(‘.popup-overlay’).fadeOut(‘slow’);
      return false;
      });

      Quizá también tienes que hacer dinámico el identificador de cada popup para poder mostrarlo u ocultarlo.

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre