关于 jquery 对话框高度和宽度增加的问题

Question

我试图增加 jquery 对话框的高度和宽度，但是当我运行程序时，高度增加得很好，但宽度没有正确增加。

这是我的程序代码

 $(document).ready(function () {
 $("#opener2").click(function () {
            $("<div id='dialog2' />").dialog(
            {
                autoOpen: false,
                width: 50,
                height: 50,
                dialogClass: 'noTitleStuff',
                draggable: true,
                resizable: false,
                open: function (event, ui) {
                }
            });

            $("#dialog2").dialog('open').show();
            setTimeout(function () {

                $("#dialog2").animate({
                    left: (($(window).width() - 400) / 2) + 'px',
                    top: (($(window).height() - 400) / 2) + 'px',
                    height: '400px', width: '400px'
                }, 200,
                function () {
                });

            }, 2000);
            return false;
        });

});

但是当我增加 height & width of .ui-dialog 而不是 #dialog2 时，我看到对话框大小适当增加，但我不想玩 .ui-dialog，这是 jquery 对话框的一部分。

所以任何人都可以建议我如何处理这种情况，因为#dialog2 高度和宽度会适当增加。

我这样排序

setTimeout(function () {
                jQuery("#dialog2").dialog("widget").animate({
                    width: '400px',
                    height: '400px'
                }, {
                    duration: 200,
                    step: function () {
                        jQuery("#dialog2").dialog('option', 'position', 'center');
                    }
                });

            }, 2000);
            return false;

Answer 1

你需要动画吗？对于简单的调整大小，您可以使用.dialog() 的内置设置器：

setTimeout(function() {
    var dlg2 = $("#dialog2");
    dlg2.dialog("option", "width", ($(window).width() - 400) / 2);
    dlg2.dialog("option", "height", ($(window).height() - 400) / 2);
    // That next line is default anyway
    dlg2.dialog("option", "position", { my: "center", at: "center", of: window });
}, 2000);

---

编辑： 如果你想要动画，你可以依靠你自己的dialogClass（noTitleStuff）而不是.ui-dialog，因为（根据文档）这将被添加到你的对话框的“根元素”中。 相反，基于动画的 $('.noTitleStuff') 可能是您最安全的选择，这样您就无需依赖（可能会更改的）内部类名称和 UI 对话框的元素层次结构。

$(document).ready(function () {
    $("#opener2").click(function () {
        $("<div id='dialog2' />").dialog({
            autoOpen: false,
            width: 200,
            height: 200,
            dialogClass: 'noTitleStuff',
            draggable: true,
            resizable: false,
            open: function (event, ui) {}
        });

        $("#dialog2").dialog('open').show();

        setTimeout(function () {
            // Working resize, based on your own custom CSS class that you attach in the dialog creation
            $(".noTitleStuff").animate({
                left: (($(window).width() - 400) / 2) + 'px',
                top: (($(window).height() - 400) / 2) + 'px',
                height: 400,
                width: 400
            }, 200);
        }, 1000);

        return false;
    });
});

我创建了一个小提琴：http://jsfiddle.net/Kpwrn/