Question

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

如何自动触发检查宽度？

Answer 1

从未在jQuery UI上做过多少工作。但是这里有一个修复你已经到达那里，显然我已经将maxWidth设置为50px，所以改变它！

$(document).ready(function(){

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

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

});

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

Answer 3

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

Answer 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");

关闭$（文件）.ready

});

宽度设置为auto时，对话框的最大宽度不会受到影响

4 个答案: