Modal Plugin

by someprimetime

HTML

<a class="js-modal" data-width="50%" href="url">Click me</a>

<div id="the-content-id">Testing the content</div>

CSS

#modal-overlay {
    filter: alpha(opacity=30);
    opacity: .3;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
    height: 100%;
    width: 100%;
}
.modal-outer {
    position: absolute;
    z-index: 50;
    text-align: left;
    padding-top: 40px;
    width: 100%;
    height: 100%;
    top: 0;
}
.modal {
    margin: auto;
    text-align: left;
    padding: 15px;
    background: white;
    padding: 10px;
    width: 300px;
    position:relative;
}
.modal-inner {
    padding: 25px;
    position: relative;
    background: white;
}
/* Modal Window */
 .close {
    border: none;
    position: absolute;
    top: 11px;
    right: 11px;
    cursor: pointer;
    display: block;
    background: url(//c14999839.r39.cf2.rackcdn.com/icon_sprite.png) no-repeat -8px -906px;
    width: 15px;
    height: 15px;
    z-index: 100;
    padding: 10px;
}

#the-content-id {
    display: none;
}

JavaScript

(function ($) {
    var methods = {
        init: function (options) {
            methods.settings = $.extend({
                'fade': false
            }, options);

            return this.each(function () {
                var $target = $(this);

                $target.on('click', $target, function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    methods.generateModal($target);
                    methods.bindCloseModal();
                });
            });
        },
        
        /**
         * @method bindCloseModal
         * This binds the escape key and the click of the modal overlay
         * to the teardown() method
         */        
        bindCloseModal : function() {
            var $body = $('body');
            
            $body.on('click.modal', function (e) {
                e.stopPropagation();
                if ($('.modal-outer').has(e.target).length === 0) {
                    methods.teardown();
                }
            }).on('keyup.modal', function (e) {
                e.stopPropagation();
                if (e.keyCode === 27) {
                    methods.teardown();
                }

            });
        },
        
        /**
         * @method teardown
         * Destroys the modal
         */
        teardown: function () {
            var $body = $('body');
            
            var revertModalContent = function () {
                // Move the container back out of the modal, since it gets destroyed
                
                if (!methods.settings.fetch) {
                    $('#' + methods.settings.contentId).hide().appendTo($('body'));
                }
            };

            var destroyModal = function () {
                $body.unbind('click.modal');
                $body.unbind('keyup.modal');
                revertModalContent();
                $('.modal-outer').remove();
                $('#modal-overlay').remove();
           ...