当宽度设置为自动时，对话框的最大宽度不受影响答案

【问题标题】：Maximum width of dialog does not affect when width is set to auto当宽度设置为自动时，对话框的最大宽度不受影响
【发布时间】：2011-12-21 12:58:37
【问题描述】：

我正在尝试使对话框使用自动宽度和高度，但只能达到一定的宽度。但是在我手动调整打开的对话框大小之前，maxWidth 不会生效。

如何自动触发宽度检查？

示例代码：http://jsfiddle.net/yy9Cd/6/

【问题讨论】：

标签： jquery jquery-ui dialog width

【解决方案1】：

从来没有用 jQuery UI 做过很多工作。但是这里有一个解决方案，显然我已将 maxWidth 设置为 50px，所以更改它！

$(document).ready(function(){

var myDialog = $("#myDialog").dialog({
    autoOpen: false,
    maxWidth: "50px",
    height: 'auto',
});

$("#showDialog").click(function(){
    myDialog.dialog("open");
});

});

【讨论】：

对话框现在将使用预定义的宽度，并且不会利用它可以使用的最大宽度 (= maxWidth)。如果我使用一个单位作为数字，maxWidth 将被完全忽略。
不确定为什么 maxWidth 不会设置。为什么不在 CSS 中为#myDialog 的样式设置 max-width？
max-width 完成了这项工作。它没有想象中的那么漂亮，但它现在可以工作了。谢谢。

【解决方案2】：

设置 CSS 的 max-width 属性确实可以确保对话框不超过该宽度，但是生成的对话框行为不稳定（溢出不可靠，调整大小的句柄可能在错误的位置），因为 jQuery 是不知道你的设置。这是我的解决方案：

    var maxWidth = 750;
    var maxHeight = 600;

    var popup = $("<div>" + content + "</div>")
        .dialog({
            autoOpen: true,
            title: title,
            hide: { effect: 'drop', direction: "up" },
            height: 'auto',
            width: 'auto',
            maxHeight: maxHeight,
            maxWidth: maxWidth,
            modal: modal,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

    var w = popup.dialog("widget").width();
    console.log("w=",w);
    if (w > maxWidth) {
        popup.dialog("option", "width", maxWidth)
        popup.dialog("widget").width(maxWidth);
    }

    var h = popup.dialog("widget").height();
    console.log("h=",h);
    if (h > maxHeight) {
        popup.dialog("option", "height", maxHeight)
        popup.dialog("widget").height(maxHeight);
    }

    w = popup.dialog("widget").width();
    console.log("w2=",w);
    h = popup.dialog("widget").height();
    console.log("h2=",h);

【讨论】：

【解决方案3】：

你不能只删除“宽度”和“高度”属性吗？ http://jsfiddle.net/Ve79f/

【讨论】：

在这种情况下，使用标准宽度，对话框不会自动缩放。如果您的文本很长，则对话框的宽度会很小，但高度会很大。

【解决方案4】：

如果你想要一些“响应式”的东西，我建议这样做。修复对话框的最大和最小尺寸，并根据窗口大小进行调整。

根据您的对话框，更改最小值或最大值。在这些限制之间，它会缩放到窗口大小的 50%。而且是居中的。

$(document).ready(function () {

        var maxWidth = 500;
        var maxHeight = 300;
        var minWidth = 250;
        var minHeight = 180;

         function diagSize () {
             var wid = $(window).width() * 0.50;
             if (wid > maxWidth) {
                 wid = maxWidth;
             } else if (wid < minWidth) {
                 wid = minWidth
             }
             var hei = $(window).height() * 0.50;
             if (hei > maxHeight) {
                 hei = maxHeight;
             } else if (hei < minHeight) {
                 hei = minHeight
             }
             $("#mydialog").dialog({height: hei, width: wid});
             $("#mydialog").dialog("option", "position", {my: "center", at: "center", of: window});
         }

然后你的对话：

var mydialog = $("#mydialog).dialog({
            autoOpen: false,
            closeOnEscape: true,
            modal: true,
            resizable: false,
            buttons: {
                "<spring:message code="action.cancel"/>": function () {
                    $(this).dialog("close");
                },
                "<spring:message code="action.next"/>": function () {
                    $.post({
                        url: '/myurl',
                        success: function(data) {

                        },
                    });
                }
            }
        });

最后，在 2 种情况下调整对话框的大小：窗口调整大小和打开之前：

$(window).resize(diagSize);

$("#btnopenmydialog").on('click', function () {
    diagSize ();
    mydialog.dialog("open");

关闭 $(document).ready

});

【讨论】：