如何使用浏览器调整 jquery ui 对话框的大小答案

【问题标题】：How to resize jquery ui dialog with browser如何使用浏览器调整 jquery ui 对话框的大小
【发布时间】：2015-04-23 00:31:41
【问题描述】：

我打开 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);
        });
});

【问题讨论】：

标签： jquery css jquery-ui jquery-plugins jquery-ui-dialog

【解决方案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);
});

【讨论】：

我将加载 ui 对话框的整个函数放入您提供的调整大小函数中。我在浏览器调整大小时调整了对话框的大小，但是我的 ui 对话框不是模态的，它显示为页面并且我收到错误：未捕获的 ReferenceError: $ is not defined (anonymous function)
我会将它们保留为两个单独的函数。这样调整大小就不会干扰对话框的初始化。只需将窗口调整大小功能放在文档准备功能中的代码之后即可。
我更新了问题。我必须做错事，因为它没有调整大小:(
我更新了上面的函数。该对话框实际上附加到您正在创建的新 div 元素而不是 openDialog。我应该读得更近一点。无论你最终调用新的 div 是你在 resize 函数中所需要的。
Wired 我调试这个函数，它在调整大小时获得价值，但对话框保持不变：/

【解决方案2】：

我认为，如果您触发事件调整对话框的大小，它应该这样做。

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

【讨论】：

那行不通。 “未捕获的错误：对话框小部件实例没有这样的方法'resize'”

【解决方案3】：

看来@jasonday 有一个很好的脚本来修改 JQuery UI 对话框功能 - 对我来说似乎相当工作得很好。

Here's his SO answer

Here's his script on github: jQuery-UI-Dialog-extended

【讨论】：