javascript - 水平居中 jQuery 对话框窗口

Question

我这里有一个例子。

当我打开窗口时，它是垂直居中的，但水平居中是很远的。当它弹出时，我想让它在屏幕上居中。

这是脚本...

    $(function() {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            width: 1011,
            height: 'auto',
            show: 'fade',
            hide: 'fade',
            buttons: {
                "Dismiss": function() {
                    $(this).dialog("close");
                }
            }
        });

我试过使用position: 'middle',，但没有用。

Answer 1

查看position http://api.jqueryui.com/dialog/#option-position的文档

这里是你如何使用它：

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 1011,
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    position: {my: "center top", at:"center top", of: window },
    buttons: {
        "Dismiss": function() {
            $(this).dialog("close");
        }
    }
}); 

我通读了文档。我希望对话框居中，在页面中间......不居中，并且在最顶部。就在页面的中间。我试过左中，中中……怎么没有中中？– webfrogs 2013 年 9 月 6 日 22:58

       Someone please come back... – webfrogs Sep 7 '13 at 2:04

您可以使用以下任何一种方法将其置于页面中间

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 1011,
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    position: {my: "center top", at:"center middle", of: window },
    buttons: {
        "Dismiss": function() {
            $(this).dialog("close");
        }
    }
}); 

或者

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    width: 1011,
    height: 'auto',
    show: 'fade',
    hide: 'fade',
    position: ['center', 'middle'],
    buttons: {
        "Dismiss": function() {
            $(this).dialog("close");
        }
    }
});