Question

我在点击链接时使用了弹出对话框。当我点击父页面的链接背景变为白色和＆amp;对话框位于中心。

但是当我要模仿浏览器大小/屏幕时，弹出窗口向右移动。无论浏览器屏幕是否最小化，我都希望在中心弹出对话框。

我使用以下jquery＆amp; css＆amp;对话框的代码

的jquery-UI-1.8.7.custom.css
的jquery-ui.min.js

代码：

$('.addlink').click(function() {
    $("#add_action").dialog({
        modal: true, 
        draggable: false, 
        resizable: true, 
        minWidth: 200, 
        width:560,
        minheight:98, 
        zIndex: 50000},
        {position:[400,120]
    });
});

Answer 1

试试这个：

$(window).resize(function() {
    $("#add_action").dialog("option", "position", "center");
});

Answer 2

第1部分：

指定对话框的显示位置。可能的值： 1）表示视口内位置的单个字符串：'center'，'left'，'right'，'top'，'bottom'。 2）一个数组，包含一个x，y坐标对，从视口的左上角，像素偏移（例如[350,100]） 3）包含x，y位置字符串值的数组（例如右上角的['right'，'top']）。代码示例

使用指定的位置选项初始化对话框。

$( ".selector" ).dialog({ position: "top" });

在初始化后获取或设置位置选项。

//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", "top" );

第二部分：

设置position option将强制执行此操作，因此只需使用相同的选择器覆盖我在此处使用#dialog的所有对话框（如果它没有找到它们，则不执行任何操作，就像所有jQuery一样）：

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Here's that same jQuery UI demo page adding only the code above，我们只是使用.resize()向窗口的resize事件添加处理程序，因此它会在适当的时间触发重新居中。

设置对话框的位置

2 个答案:

第1部分：

第二部分：