设置对话框的位置

Set position of dialog box

本文关键字：位置 对话框 设置      更新时间：2023-09-26

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

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

我使用以下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]
    });
});

试试这个：

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

第 1 部分：

指定对话框的显示位置。可能的值：1） 表示视口内位置的单个字符串："中心"、"左"、"右"、"上"、"下"。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 选项将强制执行此操作，因此只需使用相同的选择器覆盖我在此处使用的所有对话框#dialog（如果找不到它们，则不会像所有 jQuery 一样执行任何操作）：

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

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

相关文章：