jQuery Modal Popup

jPopup es un plugin de jQuery para abrir ventanas emergentes que los desarrolladores web pueden descargar de forma gratuita e integrar en sus sitios web. Es totalmente personalizable y compatible con Mozilla Firefox, Google Chrome, Safari e IE 7 +.

En el ejemplo que vamos a ilustrar vamos a ver como utilizar este plugin añadiéndole algunos parámetros.

En la cabecera de vuestra página deberemos añadir la librería jQuery, el plugin y su llamada:

<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="modal.popup.js"></script>
<script language="javascript">

    $(document).ready(function() {

        //Change these values to style your modal popup
        var align = 'center';                                    //Valid values; left, right, center
        var top = 100;                                             //Use an integer (in pixels)
        var width = 500;                                         //Use an integer (in pixels)
        var padding = 10;                                        //Use an integer (in pixels)
        var backgroundColor = '#FFFFFF';                         //Use any hex code
        var source = 'demo.html';                                 //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
        var borderColor = '#333333';                             //Use any hex code
        var borderWeight = 4;                                     //Use an integer (in pixels)
        var borderRadius = 5;                                     //Use an integer (in pixels)
        var fadeOutTime = 300;                                     //Use any integer, 0 = no fade
        var disableColor = '#666666';                             //Use any hex code
        var disableOpacity = 40;                                 //Valid range 0-100
        var loadingImage = 'lib/release-0.0.1/loading.gif';        //Use relative path from this page

        //This method initialises the modal popup
        $(".modal").click(function() {
            modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
        });

        //This method hides the popup when the escape key is pressed
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                closePopup(fadeOutTime);
            }
        });

    });

</script>

Si te fijas bien en el script observarás que puedes personalizar totalmente la ventana modal o popup mediante parámetros que se pasan como argumentos a la llamada al plugin.

El contenido de la ventana modal lo tenemos en un archivo aparte “demo.html” y también es un parámetro más del plugin.

Y luego en el <body> podemos tener o un link o un botón para hacer aparecer el popup tras pulsarlo.

<a href="javascript:void(0);">Demo</a><br /><br />
<input type="submit" value="Demo" />

Ver ejemplo en funcionamiento

Ver más documentación

Descargar

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 (7 votos, promedio: 4,29 de 5)
Cargando…
Comparte en las redes sociales

8 respuestas a “jQuery Modal Popup”

  1. Pilar dice:

    Hola, excelente código, mi pregunta es, ¿cómo podría pasar el parámetro de la url a abrir? Gracias.

  2. John dice:

    No se muestra el link para descargar el ejemplo, puedes actualizarla por favor

  3. RUBEN DARIO AGUILAR ALVAREZ dice:

    excelente tu ejemplo lo prove funcional bien, pero me gustaria saber como hago para,que desde la ventana emergente realizar un update a mi tabla ya obtengo los datos, pero me falta lo del update, me gustaria ver un ejemplo para guiarme, un saludo desde Colombia y veo que tenemos el mismo apellido..mil gracias por tu respuesta

    • Jose Aguilar dice:

      Para hacer el update al menos tengo en mente 2 opciones:

      1- Al pulsar el botón enviar el formulario por el método tradicional capturando los datos en el servidor mediante php.
      2- Utilizar ajax para no recargar la página y realizar el update llamando a un archivo php que se encargará de realizar el update.

      La primera opción es mucho más sencilla y supongo que no tendrás ningún problema, la segunda opción podría ser un nuevo post en mi blog.

  4. Felipe Vasquez dice:

    Hola

    El link de descarga está dañado.

    Lo puedes por favor actualizar.

    Gracias

  5. Albert dice:

    Como pongo el botón de cerrar

    • Jose Aguilar dice:

      En el demo.html tendrás que crear un botón o link que represente el cerrar y luego añadir lo siguiente dentro del document ready:

      $(‘#close’).click(function() {
      closePopup(fadeOutTime);
      });

      Al botón o link ponle id=”close”
      No lo he probado pero debería funcionar.
      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