En este CODE SNIPPET, continuando y mejorando el anterior ‘Basic popup window’, voy a mostrar cómo se genera un plugin utilizando javascript y jquery, que muestre popup’s dinámicos.
Partiendo del código del post anterior y con el fin de reutilizar código para popup multiples, vamos a agrupar todo el contenido en un plugin que será el encargado de rellenar el popup e incluir toda la funcionalidad en un único archivo. De esta forma, tendremos la ventaja de poder generar popup’s de forma sencilla sin necesidad de repetir código.
Este pequeño plugin puede mostrar dos tipos de popups: bien una alerta estática de texto, bien un contenido de una capa.
Para ello, generaremos el código básico de un plugin, al que iremos añadiendo los distintos fragmentos de código, hasta completar el archivo.
Lo primero que haremos, será añadir los atributos base de nuestro plugin. Recordad que podemos ampliarlos, en función de nuestras necesidades. Por tanto, la primera aproximación queda así:
Partiendo del código del post anterior y con el fin de reutilizar código para popup multiples, vamos a agrupar todo el contenido en un plugin que será el encargado de rellenar el popup e incluir toda la funcionalidad en un único archivo. De esta forma, tendremos la ventaja de poder generar popup’s de forma sencilla sin necesidad de repetir código.
Este pequeño plugin puede mostrar dos tipos de popups: bien una alerta estática de texto, bien un contenido de una capa.
Para ello, generaremos el código básico de un plugin, al que iremos añadiendo los distintos fragmentos de código, hasta completar el archivo.
Lo primero que haremos, será añadir los atributos base de nuestro plugin. Recordad que podemos ampliarlos, en función de nuestras necesidades. Por tanto, la primera aproximación queda así:
jQuery.fn.ShowPopup
= function (options) {
// atributos por dedecto, que extienden a
options
var settings = $.extend({
cerrarText: '[X]', //texto para el botón de cerrar
isAlert: false, //atributo
que indica si es un popup de alerta o de objeto
AlertText:
undefined, //texto a mostrar en caso de tener una
alerta estática
onClose: undefined //callback a ejecutar
tras cerrar el popup
},
options);
// creamos los metodos
var methods = {};
//creamos el plugin
};// creamos los metodos
var methods = {};
//creamos el plugin
return
this.each(function
() {});
Como se puede ver, he incorporado una pequeña funcionalidad que puede ser útil, y es, la opción de pasar como parámetro una función para ejecutar cuando se cierra el popup.
Una vez creados los atributos, procedemos a generar los métodos que utilizaremos para dar funcionalidad a nuestro plugin. Así, implementaremos tres métodos: open, close y destroy, encargados de abrir, cerrar y destruir el popup respectivamente:
// creamos los metodos
var methods = {
open:
function () { $('BODY > .popup').fadeIn(300); },
close: function
() { $('BODY > .popup').fadeOut(300,
methods.destroy); },
destroy: function
(content) {
//destruimos cualquier popup previo
if ($('BODY > .popup').length) $('BODY > .popup').stop().hide().remove();
if ($('BODY > .popup').length) $('BODY > .popup').stop().hide().remove();
}
};
Con el método destroy, nos aseguramos de que sólo haya un popup en el body. La ventaja de utilizar estos métodos, reside en la facilidad para insertar animaciones y efectos a nuestro gusto, en las funciones de apertura y cierre (en este caso, unos simples efectos de alpha).
Por último, incorporamos el código que junta ambas partes y genera finalmente el popup:
//creamos el plugin
return
this.each(function
() {
methods.destroy();
//destruimos cualquier popup previo
//montamos las capas
var wrapper = $('<div
class="popup">');
var popup = $('<div
class="popup_window">');
var closed
= $('<div class="popup_close">');
var content = $('<div
class="popup_contenido">');
//incorporamos los elementos al pop, y el pop al
wrapper
popup.append(closed).append(content);
wrapper.append(popup);
//incluimos el popup en el body
$('body').append(wrapper);
//inicializamos el boton cerrar
closed.html(settings.cerrarText);
closed.click(methods.close);
if
(jQuery.isFunction(settings.onClose)) closed.bind('click',
settings.onClose);
//incluimos el contenido (comprobamos si
es texto o un objeto)
if (settings.isAlert) {
var
alert_content = $('<div>' +
settings.AlertText + '</div>');
alert_content.addClass('contenido_alerta');
content.html(alert_content);
}
else {
//'Clone' de capa para no borrarla al 'destroy'
var dinamic_content = $(this).clone();
content.html(dinamic_content.show().addClass('contenido'));
}
//mostramos
methods.open();
});
<a href="#" onclick="$('#mipop').ShowPopup();">
Mostrar CAPA como popup
</a>
O con parámetros:
<a href="#" onclick="$('BODY').ShowPopup({cerrarText: 'CERRAR',
isAlert:true, AlertText:$(this).html(), onClose:function(){alert('wow!');}
});">
Mostrar alerta de nuevo un texto como popup, y
avisar de su cierre.
</a>
En el siguiente enlace, podéis encontrar todo el código fuente de ejemplo.
Source Code
P.D: Mejorar y evolucionar este código queda ahora como algo más sencillo. Desde incluir varios botones, hasta personalizar todo el comportamiento. Sólo es cuestión de probar, fallar y al final encontrar qué es lo que mejor se adapta a nuestras necesidades.
Como siempre, espero que os sirva.
¡Un saludo a todos! [...]
