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




11 Comentarios:

Anónimo dijo...

Interesante...
Dime, es factible no usar el botón y hacerlo al pinchar una u otra imagen?
Tengo una lista de expositores y quiero que al pinchar sobre cada imagen del expositor me aparezca la ventana con sus datos.

Gracias,

Felipe Martínez D. dijo...

Hola.

Se puede utilizar el elemento que desees: una imagen, un enlace, ... Al pinchar sobre él, se abrirá la ventana emergente.

Saludos.

Ganar dinero por internet dijo...

Yo lo que quiero es una ventana emergente que no te deje ver el contenido de la web hasta que no des en aceptar por ejemplo

Felipe Martínez D. dijo...

Hola.

Prueba la solución que se propone aquí:
http://railsadventures.wordpress.com/2012/09/25/jquery-mobile-popups-preventing-close-when-clicking-outside/

Saludos cordiales.

Anónimo dijo...

Hola amigo primero gracias por tu aporte ahora mi pregunta yo tengo este código de publicidad


< script type="text/javascript" >
var pmauid = '10683';
var pmawid = '10034';
var fq = '0';
< /script >
< script type="text/javascript" src="http://cdn.popmyads.com/pma.js" >< /script >

el cual cada ves que hacen clic en mi pagina sale una ventana emergente de publicidad pero yo quiero que esa ventana no salga al frente sino que se ponga de tras del navegador como lo puedo hacer si me puedes ayudar te lo agradecería mucho saludos y suerte.

Felipe Martínez D. dijo...

Hola.

No entiendo muy bien tu pregunta. ¿Quieres que esa ventana se abra pero que no sea la ventana activa?.

Anónimo dijo...

Hola felipe bueno a ver si me explico mejor jeje lo que quiero es que esa pagina emergente se abra en segundo plano gracias espero tu respuesta.

Felipe Martínez D. dijo...

Hola.

He encontrado esta página donde se habla de cómo abrir ventanas emergentes en segundo plano:

http://stackoverflow.com/questions/6842892/how-to-open-popup-windows-in-background-using-javascript


Espero que te sirva.

Saludos.

Unknown dijo...
Este comentario ha sido eliminado por el autor.
Unknown dijo...

Porque le pusiste espacios a los tag ._.

Felipe Martínez D. dijo...

Hola Carlos.

Le puse los espacios para que le blog no lo interpretara como html y así pudiérais ver el código.

Saludos.

Publicar un comentario

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

TOPO