viernes, 17 de enero de 2014

Crear Ventanas Emergentes con JQuery (Javascript)










En este artículo vamos a aprender a crear ventanas emergentes o popups mediante Javascript. Para ello utilizaremos la famosa librería jQuery y un plugin específico para popups llamado bPopup. Lo primero que tenemos que hacer es descargarnos jQuery (http://jquery.com/download/) y bPopup (http://dinbror.dk/bpopup/), e importarlo en nuestro html:

< script src="jquery-x.x.x.min.js">< /script>
< script src="jquery.bpopup-x.x.x.min.js">< /script>


Hay que sustituir las x.x.x por la versión de las librerías que os hayáis bajado.

A continuación muestro el código completo de un ejemplo muy sencillo:



< !DOCTYPE html>
< html>
< head>
< title>Ventana Emergente< /title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
< script src="jquery-2.0.3.min.js">< /script>
< script src="jquery.bpopup-0.9.0.min.js">< /script>

< script type="text/javascript">
    ;(function($) {
         // Cuando la página esté cargada
        $(function() {
            // Evento click
            $('#boton').on('click', function(e) {
                // Prevenir la acción por defecto
                e.preventDefault();
                // Se lanza el método bPopup 
                $('#elemento_a_mostrar').bPopup();
            });
        });
    })(jQuery);
 < /script>
< /head>

< body>
     < !-- Botón -->
            < button id="boton">Mostrar mensaje< /button>
            < !-- Contenido a mostrar -->
            < div id="elemento_a_mostrar">El plugin bPopup funciona correctamente< /div>
< /body>
< /html>


 
Nota: Para que el blog me interprete el código como texto y no como html he tenido que añadir un espacio después de cada “<”. Cuando vayáis a probar el código, simplemente debéis quitar ese espacio.

Como vemos, simplemente tenemos un botón y un div que contiene el elemento a mostrar (en este caso un mensaje). Al pulsar en el botón se llama al método bPopup(), que se lanza sobre el elemento #elemento_a_mostrar. La línea e.preventDefault(); sirve para evitar la acción por defecto del evento. Por ejemplo, evitar que al pulsar sobre un hipervículo el navegador nos lleve a la dirección del hipervículo.

Utilizando este plugin y unas pocas líneas de código podemos conseguir un gran número de distintos estilos, efectos y tipologías de ventanas emergentes. Recomiendo que probéis los distintos ejemplos que muestra el autor del plugin en su página http://dinbror.dk/bpopup. Es sorprendente cómo con tan poco se puede hacer tanto. Como dice el lema de jQuery: "write less, do more".

 

 

Fuentes:

http://dinbror.dk/bpopup
http://dinbror.dk/blog/bPopup
http://gespadas.com/return-false-preventdefault




Felinfo: Java, Linux, Virtualización. Open Source.  ©Template Blogger Green by Dicas Blogger .

TOPO