jQuery Dialog Utility


Ever have a web interface that requires a lot of dialog popup windows?  I came up with this JavaScript utility class to help me create, show, and delete dialog boxes.  I also added a confirmation dialog box method and a simple message method.

var Dialog = {
    dialogId: 'dialogBox',
    createDialog: function(id, width, height) {
        jQuery('body').append("");
        var buttons = {};
        jQuery('#' + id).dialog({
            width: width,
            height: height,
            position: ['center', 50],
            autoOpen: false,
            resizable: false,
            modal: true,
            close: function(event, ui) {
                Dialog.closeDialog(id);
            },
            buttons: buttons
        });
    },
    closeDialog: function(id) {
        jQuery('#' + id).dialog('destroy');
        jQuery('#' + id).remove();
    },
    showConfirm: function(message, width, callback, callbackArgs) {
        if(!width) {
            width = 200;
        }
        // Setup Dialog Box
        jQuery('body').append("");
        jQuery('#' + Dialog.dialogId).dialog({
            width: width + 'px',
            autoOpen: false,
            resizable: false,
            hide: "fade",
            modal: true,
            close: function(event, ui) {
                jQuery('#' + Dialog.dialogId).dialog('destroy');
                jQuery('#' + Dialog.dialogId).remove();
            },
            buttons: {
                Cancel: function() {
                    jQuery(this).dialog("close");
                },
                Yes: function() {
                    callback(callbackArgs);
                    jQuery(this).dialog("close");
                }
            }
        });
        jQuery('#' + Dialog.dialogId).dialog('open');
    },
    showMessage: function(message, width, closeTime) {
        if(!width) {
            width = 400;
        }
        // Setup Dialog Box
        jQuery('body').append("");
        jQuery('#' + Dialog.dialogId).dialog({
            width: width + 'px',
            autoOpen: false,
            resizable: false,
            position: ['center', 300],
            hide: "fade",
            modal: true,
            close: function(event, ui) {
                jQuery('#' + Dialog.dialogId).dialog('destroy');
                jQuery('#' + Dialog.dialogId).remove();
            },
            buttons: {
                Ok: function() {
                    jQuery(this).dialog("close");
                }
            }
        });
        jQuery('#' + Dialog.dialogId).dialog('open');
        if(closeTime) {
            setTimeout("jQuery('#" + Dialog.dialogId + "').dialog('close')", closeTime);
        }
    }
};
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s