1

我在单击链接时使用了一个对话框弹出窗口。当我单击父页面的链接背景更改为白色时，会在中心看到对话框。

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

我将以下 jquery & css & 代码用于对话框

  1. jquery-ui-1.8.7.custom.css
  2. 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]
    });
});
4

2 回答 2

1

尝试这个：

$(window).resize(function() {
    $("#add_action").dialog("option", "position", "center");
});
于 2012-05-16T09:28:15.403 回答
1

第1部分：

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

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

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

在 init 之后获取或设置位置选项。

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

第2部分：

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

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

这是相同的 jQuery UI 演示页面，仅添加了上面的代码，我们只是为窗口的resize事件添加了一个处理程序.resize()，因此它会在适当的时间触发重新居中。​</p>

于 2012-05-16T09:31:01.290 回答