Many jQuery modal plugins require including more than just the plugin - many contain separate stylesheets and images. This plugin leaves the styling up to the user and focuses simply on the behavior of the modal.

pw.modal.js

/*globals jQuery,Mustache*/


(function($) {
    $.fn.modal = function(options) {
        var els = $(this)
        , that = {
            /**
            *  initialization, set up event handlers, etc. 
            */
            init: function() {
                var self = $(this)
                , opts = that.options
                , pageContainer = self.parent()
                , modalContainer = $('<div class="pw-modal-container" />')
                , modalShade = $('<div class="pw-modal-shade" />')
                , modalClose = $('<a class="pw-modal-close" href="#">X</a>')
                ; 

                if ( $('.pw-modal-container').length === 0 ) {
                    modalContainer.append(modalShade);
                    pageContainer.prepend(modalContainer);    
                } else {
                    pageContainer = self.parent();
                    modalContainer = $('.pw-modal-container');
                    modalShade = $('.pw-modal-shade');
                    modalClose = $('.pw-modal-close');
                }

                self.addClass('pw-modal-content');
                self.prepend(modalClose);
                modalContainer.append(self);

                modalContainer.css({
                    display      : 'none'
                    , width        : $('body').width()
                    , height     : $('body').width()
                    , position   : 'absolute'
                    , zIndex     : 9999
                });

                modalShade.css({
                    width        : $('body').width()
                    , height     : $('body').height()
                    , background : 'rgba(0, 0, 0, .6)'
                    , position   : 'absolute'
                    , zIndex     : 1
                    , opacity    : 0
                });

                self.css({
                    opacity      : 0
                    , width      : that.options.width
                    , height     : that.options.height
                    , position   : that.options.position
                    , zIndex     : 2
                    , left       : that.options.leftPos
                    , top        : that.options.topPos
                });

                that.showModal(modalContainer, modalShade, self); 

                modalClose.bind('click', function (ev) {
                    ev.preventDefault();
                    that.hideModal(modalContainer, modalShade, self);
                });

                modalShade.bind('click', function (ev) {
                    that.hideModal(modalContainer, modalShade, self);
                });

                $('body').bind('keyup', function (ev) {

                    if ( ev.keyCode == 27 ) {
                        that.hideModal(modalContainer, modalShade, self);
                    }
                });
            }

            , showModal: function (container, shade, content) {
                
                $('.pw-modal-container').css('display', 'block');
                shade.stop().animate({
                    opacity : 1
                }, 300, function () {
                    content.css('display', 'block');
                    content.stop().animate({
                        opacity : 1
                    }, 300, function () {
                        container.addClass('pw-modal-on');    
                    });
                });
            }

            , hideModal: function (container, shade, content) {
                content.stop().animate({
                    opacity : 0
                }, 300, function () {
                    content.css('display', 'none');
                    shade.stop().animate({
                        opacity : 0
                    }, 300, function () {
                        container.css('display', 'none');
                        container.removeClass('pw-modal-on');
                    });
                });
            }

            , options: {
                //default configuration
                //e.g. width: 100
                //     height: 200
                //     elSelector: 'li.classname'
                // trigger : $('body')
                width       : 600
                ,height     : 'auto'
                ,position   : 'relative'
                ,leftPos    : 'auto'
                ,topPos     : 'auto'
            }
        }
        ; 

        $.extend(that.options, options);

        els.each(that.init);
    };

})(jQuery);