simple modal dialog using jquery

by Seungrae Lee

HTML

<div id="dialog"></div>

CSS

.ui-dialog {
    position: absolute;
    top: 0;
    left: -100px;
}
.ui-dialog-content {
    background-color: #fff;
    text-align: left;
    overflow: auto;
    padding: 15px;
    position: absolute;
    top: 28px;
    border: 2px solid #000;
}
.ui-dialog-titlebar, .ui-dialog-titlebar-close {
    background-color: #000;
    border: 2px solid #000;
}
.ui-dialog-titlebar {
    padding: 5px 15px;
    position: absolute;
    text-align: left;
    height: 20px;
}
.ui-dialog-titlebar-close {
    position: absolute;
    top: 0;
    right: 0px;
}
.ui-dialog-title {
    color: #fff;
}
.ui-state-hover {
    cursor: pointer;
}
.ui-dialog-overlay {
    background-color: #aaaaaa;
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter:"alpha( opacity=30 )";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

JavaScript

/*
 *	usage:
 *		$(selector).dialog();
 *
 *	options:
 *		@title: dialog's title
 *		@draggable: drag mode (default value:false)
 *		@content: dialog's content
 *		@minWidth: dialog's width (default value: 150)
 *		@minHeight: dialog's height (default value: 150)
 *		@position: dialog's position (top and left) 
 *                optionable string 'center' is also available
 *		@modal: modal mode (default value: false)
 *		@zIndex: z-index of dialog (default value: 1000)
 *		@dialogClass: style class of dialog
 *		@closeIcon : url path of a close icon
 *		@closeOnEscape : allow closing by pressing the escape key
 *						,which is acceptable if only modal mode is true
 *		@closeButton : object of close button
 *
 */
(function ($, undefined) {
    $.ui = $.ui || {};

    $.extend($.ui, {
        keyCode: {
            ESCAPE: 27,
            TAB: 9
        }
    });

    var uiDialogClasses = 'ui-dialog ';

    $.extend($.fn, {
        dialog: function (options) {
            return this.each(function () {
                $.instanceCreator(this, options);
            });
        },
        close: function () {
            if (this[0].dialog) this[0].dialog.close();
        }
    });

    // creator of an instance
    $.instanceCreator = function (target, options) {
        if (target.dialog) { // old instance
            target.dialog.init(target, options);
        } else { // new dialog
            target.dialog = new $.impl(target, options);
        }

        return target.dialog;
    };

    // constructor
    $.impl = function (data, options) {
        this.init(data, options);
    };

    // implementation
    $.extend($.impl, {
        version: "0.5.0",
        // control number of dialog
        uuid: 0,
        defaults: {
            title: '',
            draggable: false,
            content: '',
            minWidth: 150,
            minHeight: 150,
            position: {
                top: 0,
                left: 0
            },
            modal:...