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身高＆amp;宽度会适当增加。

这样我排序

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()内置的setter：

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，因为（根据文档）这将被添加到＆＃34;根元素＆＃34;你的对话框。基于动画的$（＆＃39; .noTitleStuff＆＃39;）可能是您最安全的选择，这样您就不需要依赖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/

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

这样我排序

1 个答案: