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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (41 votos, promedio: 4,85 de 5)
Cargando…
Comparte en las redes sociales

69 respuestas a “Popup me con jQuery”

  1. 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

  2. Karen dice:

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

  3. 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.

  4. Luis Benavides dice:

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

  5. Alonso dice:

    Gracias hombre, tu web me ha servido de mucho.

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