Es muy común que en nuestras aplicaciones necesitemos abrir popups y, para ello, generalmente se suelen usar plugins JavaScript como jQuery.UI u otros que son algo más pesados de lo que realmente necesitamos. Además, normalmente, los plugins añaden estilos que no nos hacen falta y que debemos sobreescribir con gran esfuerzo para no perder el look&feel de nuestro sitio web.
¿Qué podemos hacer para evitar «problemas» sólo por intentar abrir popups?
Opción 1: Imitar a Chuck Norris y hacerlo por nuestra cuenta
Esta opción me suele gustar pero sólo es aplicable en caso de que seáis buenos programando JavaScript, porque de lo contrario estaréis desaprovechando el tiempo y es posible que acabéis enredados en un código difícil de mantener.
Opción 2: Buscar un plugin simple con pocos o ningún estilo
Esto puede ser realmente lo que necesitamos en la mayoría de los casos y, en la temática de este artículo, os hablaré un poco de bPopup con además una solución de ejemplo.
bPopup es un plugin que nos permite abrir ventanas modales (popups) que aplica muy poco (o nada) de estilos, es ligero y fácil de configurar, con muchas opciones accesibles que nos permitirán rápidamente crear un popup que encaje perfectamente en el look&feel de nuestro sitio web.
La opción más simple es abrir el popup y, para ello, sólo necesitamos ejecutar una pequeña instrucción JavaScript
$(‘element_to_pop_up’).bPopup();
Popups infinitos
A priori parece una opción que no tiene mayor complejidad, pero la muchos plugins que implementan la funcionalidad de abrir ventanas modales no permiten la creación de infinitos popups unos sobre otros por problemas a la hora de tratar las clases que aplican. Con bPopup es muy sencillo tener esta funcionalidad que nos permitirá trabajar con popups sobre popups.
$(‘element_to_pop_up_1’).bPopup({
closeClass:‘close1’,
follow: [false, false] //x, y
});
$(‘element_to_pop_up_2’).bPopup({
closeClass:‘close2’,
follow: [false, false] //x, y
});
…
$(‘element_to_pop_up_N’).bPopup({
closeClass:‘closeN’,
follow: [false, false] //x, y
});
Control de eventos
bPopup también nos aporta control de eventos para poder realizer tareas en cada instante de la vida del popup.
$(‘element_to_pop_up’).bPopup({
onOpen: function() { alert(‘onOpen fired’); },
onClose: function() { alert(‘onClose fired’); }
},
function() {
alert(‘Callback fired’);
});
Carga de contenido externo
bPopup nos permite realizer la carga de un contenido externo mediante su URL. En el siguiente ejemplo sacado de la página de bPopup, vemos como se carga de forma asíncrona, el contenido del blog del autor.
$(‘element_to_pop_up’).bPopup({
content:‘iframe’, //’ajax’, ‘iframe’ or ‘image’
contentContainer:‘.content’,
loadUrl:‘http://dinbror.dk/blog’ //Uses jQuery.load()
}
);
Podéis descargaros de aquí un ejemplo muy simple
