Question

I have the following code that I use to create a dialog box:

(function ($) {
    $.fn.createCommonDialog = function () {
        this.dialog({
            autoOpen: false,
            modal: true,
            resizable: true,
            draggable: true,
            height: 'auto',
            width: 875,
            buttons: {
                "Submit": function () {
                    tinyMCE.triggerSave();
                    $("#update-message").html('');
                    $("#dialogForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {

            }
        });
    };
})(jQuery);

I am open the dialog box with the following:

    var dialogDiv = $('#commonDialog');
    dialogDiv.dialog('option', 'title', action + ': ' + viewID)
    dialogDiv.dialog('open');

Can someone tell me how I could modify this code so that there’s an option for opening the dialog box and having it so that it fills the browser screen? Please note there’s more to the code but I just included the important parts to do with opening the dialog.

Answer 1

Your createCommonDialog plugin will take some work to be able to be used to both initialize dialog as well as be able to pass options with an open handler.

Passing the width and height as open options nstead of in main create allows for window resizes

You could create a separate open function something along the lines of:

$.fn.openCommonDialog=function(action, viewID){
    var openOpts={
        width: $(window).width()-10,
        height: $(window).height()-10,
        'title': action + ': ' + viewID
    }

    $(this).dialog('option', openOpts).dialog('open');

};

 $('#commonDialog').openCommonDialog('my action', 765);