Re-usable modal using jquery-ui plus extension for WordPress AJAX

modal-object.js

/**
 * Example init
 * 
 * new Modal('login-form', { 
 *      title   = 'Please Log In',
 *      content = preloader.spawn();
 * });
 * 
 * @param name
 * @param options
 * @constructor
 */

var Modal = function(name, options) {
    /**
     * Arguments passed
     */
    this.name       = name;
    this.options    = options;


    /**
     * The elements
     * @type {{}}
     */
    this.element    = {}; // The Modal Element
    this.modal      = {}; // The Modal Object

    
    /**
     * This object
     * @type {Modal}
     */
    var $this       = this; // This Object


    /**
     * The modal container wrapper
     * @returns {string}
     */
    this.container  = function() {
        return '' +
            '<div class="modal-box" data-name="'+$this.name+'" title="'+$this.options.title+'">' +
            ''+$this.options.content+'' +
            '</div>';
    };


    /**
     * Prepends the modal container to the body
     * @returns {boolean}
     */
    this.create     = function() {
        // Cleanup before create
        $this.destroy();

        // Inject HTML to the DOM before the body
        $('body').prepend($this.container());

        // Select the newly inserted element
        $this.element = $('.modal-box[data-name="'+$this.name+'"');

        // Bind jQuery-ui dialog to element
        $this.modal = $this.element.dialog({
            //.. jQuery-ui Dialog Params
        });

        return false;
    };


    /**
     * Params : requestContent - immediately request content
     * Displays modal box
     */
    this.spawn      = function(requestContent) {

        // requestContent default false
        requestContent =
            typeof requestContent !== 'undefined' ?
                requestContent : false;

        $this.create();

        // Then open it
        $this.modal.dialog('open');

        // Hide header when modal open
        var header = $('header');
        header.addClass('hide');

        // if requestContent true then get the content
        if(requestContent) {
            $this.requestContent();
        }
    };


    /**
     * Destroys modal box
     */
    this.destroy = function() {
        
        if($this.element.length>0) {
            // Remove our modal box from the DOM
            $this.element.remove();
        }
    };


    /**
     * Starts the request for content
     * @param modal
     * @returns {*}
     */
    this.requestContent = function() {
        var xhr;

        if (xhr && xhr.readyState != 4) {
            xhr.abort();
        }

        xhr = $.ajax({
            url: ajaxurl,
            data: {
                action:     'modal',    // Mapped to WordPress Ajax method 'modal'
                template:   $this.name  // WordPress Ajax method modal uses name to map to template file for contents of modal
            },
            success: function (content) {

                $this.setContent(content, function () {
                    // after ajax complete callback
                });
            }
        });

        return xhr;
    };


    /**
     * Set the content inside the modal
     *
     * @param content
     * @param callback
     */
    this.setContent = function(content, callback) {
        $this.element.html(content);
        $this.fluid();

        if(callback!=='undefined') {
            callback();
        }
    };


    /**
     * Set new modal title
     * @param title
     */
    this.setTitle = function(title) {
        $this.find('.ui-dialog-title').text(title);
    };

    /**
     * Find HTML elements within the modal
     *
     * @param element
     * @returns {*}
     */
    this.find   = function(element) {
        var els = $this.element.find(element);

        if(els.length>0) {
            return els;
        }

        return false;
    };


    /**
     * Fluid jquery-ui dialogs
     */
    this.fluid  = function() {
        var $visible = $(".ui-dialog:visible");

        // each open dialog
        $visible.each(function () {
            var $this = $(this);
            var dialog = $this.find(".ui-dialog-content").data("ui-dialog");

            // if fluid option == true
            if (dialog.options.fluid) {
                var wWidth = $(window).width();

                // check window width against dialog width
                if (wWidth < (parseInt(dialog.options.maxWidth) + 50)) {

                    // keep dialog from filling entire screen
                    $this.css("max-width", "90%");
                } else {

                    // fix maxWidth bug
                    $this.css("max-width", dialog.options.maxWidth + "px");
                }

                //reposition dialog
                dialog.option("position", dialog.options.position);
            }
        });
    }
};

modal-usage.js

// Create a modal
var modal = new Modal('member-login', {
  'title'     : 'Please log in',
  'content'   : '<p>This is a login box</p>'
});

modal.spawn(); 

// Create modal and request content via WordPress AJAX
var modal = new Modal('member-login', {
  'title'     : 'Please log in',
  'content'   : 'Loading...'
});

modal.spawn(true); 

// Set content of existing modal
modal.setContent('<p>New Content</p>')

// Set new modal title
modal.setTitle('New Title');

modal-wordpress.php

class Modal {

    public function __construct() {
        add_action( 'wp_ajax_modal',            array($this, 'modal') );
        add_action( 'wp_ajax_nopriv_modal',     array($this, 'modal') );
    }
    
    
    public static function modal() {
        
        if(isset($_REQUEST['template'])) {

            ob_start();

            // Choose directory for modal content
            include(TEMPLATEPATH . '/tpl/modal/'.$_REQUEST['template'].'.php');
            $modal = ob_get_contents();
            ob_end_clean();

            echo $modal;
        }

        die();
    }
  }
  
  
  new Modal();