CODE SNIPPET: Advanced popup window

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í:

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

    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();

        }

    };

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();

});

Sólo quedaría añadir los css y el código html para efectuar las llamadas que, a modo de ejemplo podrían ser:

<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!