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/bpopuphttp://dinbror.dk/blog/bPopup
http://gespadas.com/return-false-preventdefault
Tweet