如何随着浏览器调整大小jquery ui对话框

Question

我打开了jQuery UI对话框并在其中加载了一些内容。但是当我调整浏览器大小时，jq对话框的宽度/高度不会改变。我尝试了一些方法，但没有成功。这是我打开它的方式：

$(document).ready(function () {
    var wWidth = $(window).width();
            var dWidth = wWidth * 0.9;
            var wHeight = $(window).height();
            var dHeight = wHeight * 0.9;

            $(".openDialog").live("click", function (e) {
                e.preventDefault();
                $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        resizable: false,
                        show: 'fade',
                        width: dWidth,
                        height: dHeight,                    
                        create: function (event, ui) {
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display", "none");

                            $(this).parents(".ui-dialog").css("padding", 0);
                            $(this).parents(".ui-dialog").css("border", 0);
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding", 0);

                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("background", "#000000");
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("overflow", "hidden");

                        }  

                    })
                    .load(this.href);
            });
$(window).resize(function () {
            var wWidth = $(window).width();
            var dWidth = wWidth * 0.9;
            var wHeight = $(window).height();
            var dHeight = wHeight * 0.9;
            $(".openDialog").dialog("option", "width", dWidth);
            $(".openDialog").dialog("option", "height", dHeight);
        });
});

- 1110

Answer 1

打开对话框后，宽度和高度将保持不变，直到被调整大小。绑定一个窗口调整大小事件来改变它。

$(window).resize(function() {
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.9;
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.9;
    $("#data-dialog-id").dialog("option", "width", dWidth);
    $("#data-dialog-id").dialog("option", "height", dHeight);
});

- J. Celestino

---

我把加载UI对话框的整个函数放在了你提供的调整大小函数中。当我调整浏览器大小时，对话框也会随之调整大小，但是UI对话框不是模态的，而是显示为一个页面，并且出现错误：未捕获的引用错误：$未定义（匿名函数） - 1110

我会将它们作为两个单独的函数留下。这样调整大小就不会干扰对话框的初始化。只需在文档准备好函数中的代码后放置窗口调整大小函数即可。 - J. Celestino

我已经更新了问题。我一定做错了什么，因为它不会调整大小:( - 1110

我更新了上面的函数。实际上，对话框是附加到一个新的 div 元素上，而不是 openDialog。我应该仔细阅读一下。无论你最终称呼那个新的 div，都需要在 resize 函数中使用它。 - J. Celestino

当我将宽度/高度设置为“自动”时，它可以很好地调整大小，但对话框不再居中了... - 1110

Answer 2

看起来@jasonday有一个不错的脚本，修改JQuery UI对话框功能-对我来说似乎运行得相当良好。

这是他在SO上的答案

这是他在github上的脚本：jQuery-UI-Dialog-extended

- bkwdesign

Answer 3

我认为如果你触发对话框的resize事件，它应该会执行。

$( ".selector" ).dialog( "resize");

- ElSniffer

---

那不起作用。"未捕获的错误：对话框部件实例没有'调整大小'方法" - Cristian Diaconescu