如何在jQuery UI中打开一个对话框并填充整个浏览器窗口?

时间:2012-03-02 12:24:56

标签: jquery

我有以下用于创建对话框的代码:

(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);

我打开对话框,其中包含以下内容:

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

有人可以告诉我如何修改此代码,以便有一个选项可以打开对话框并让它填满浏览器屏幕吗?请注意代码中还有更多内容,但我只是包含了打开对话框的重要部分。

3 个答案:

答案 0 :(得分:2)

您的createCommonDialog插件需要一些工作才能用于初始化对话框以及能够使用打开处理程序传递选项。

将宽度和高度作为打开选项传递而不是主create允许窗口调整大小

你可以创建一个单独的open函数:

$.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);

答案 1 :(得分:1)

这样的东西?

height: $(window).height(),
width: $(window).width(),

这将使对话框与视口大小相同。这是你的意思填写浏览器屏幕?

答案 2 :(得分:1)

height: $(window).height(),
width: $(window).width(),

可以帮助这个