jqueryui对话框定位

Posted 2023-03-06

【中文标题】jqueryui对话框定位

【英文标题】：jqueryui dialog positioning

【发布时间】：2012-03-07 11:17:21

【问题描述】：

我正在使用 JQuery UI，并希望将我的对话框水平居中但垂直高于中心，可能是固定数量的像素或与页面顶部的相对距离。是否有捷径可寻？看起来只有几个预定义的值，或者我可以使用一个确切的位置，但有没有简单的方法来完成这个？

 $("#dialog-form").dialog(
                autoOpen: false,
                width: 630,
                position: 'center',
                modal: true,
                resizable: false,
                closeOnEscape: false

            );

【问题讨论】：

你试过['center', 'top']吗？

这使得对话框水平显示在中心但在页面顶部（假设我没有做错）。我想将对话框定位在中心上方一点。

【参考方案1】：

将 css 应用到您的#dialog-form use % 示例中

如果宽度 = 1000

放

左：50% 左边距：-500px;

使其居中。或者你可以使用 iframe。

【参考方案2】：

使用position option 将对话框顶部与窗口顶部对齐（加上一个像素或百分比偏移）。

这应该使对话框水平居中，并将其放置在距顶部 150 像素的位置。

$("#dialog-form").dialog(
    autoOpen: false,
    width: 630,
    position:  my: 'top', at: 'top+150' ,
    modal: true,
    resizable: false,
    closeOnEscape: false
);

旧版本的 jQuery UI 使用了一个数组，其中包含一个 [x,y] 坐标对，像素偏移距视口的左上角（例如 [350,100]）。

var dialogWidth = 630;
$("#dialog-form").dialog(
    // ...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    // ...
);

【讨论】：

需要注意的是，数组方法已经被弃用了。改为使用对象。

更新为使用位置对象（对于较新版本的 jQuery UI）

注意，您可以控制两个对象的 x,y。 位置： my: "center top", at: "center top", of: window ,

【参考方案3】：

我在搜索同一个问题时遇到了这个问题，但我已经有了答案：

position: ['center', 'top+100']

这将水平居中，距离顶部 100 像素

这也有效

position: ['center', 'center+100']

水平居中，距中心下方 100 像素

【参考方案4】：

我调整了 Exlord 的答案以适合。

位置：['center-7%', 'center-12%']

这会水平和垂直调整

$(".popup").dialog(    
position: ['center-7%', 'center-12%'],
title: 'Updating',
    width: "auto",

);

【参考方案5】：

这对我有用

 position:  my: "center", at: "center", of: window ,

您也可以在此处查看对话位置Find Position

【参考方案6】：

试试这个：

    position: 
        my: 'top',
        at: 'top',
        of: $('#some-div')
    ,

【参考方案7】：

position:  
   my: 'top', 
   at: 'top+150' 

为我工作。

【参考方案8】：

如果由于链接的 class 具有单击事件处理程序而创建打开 jQuery 对话框的链接，您可能注意到它可能会跳转到顶部该页面，但在页面更深处创建模式对话框，您必须滚动到它。

如果有人只是试图阻止 jQuery 对话框跳到顶部，希望它停留在您单击的链接附近，只需删除 href。几乎疯了试图解决这个问题。 html5 规范显然将href="" 或href="#" 理解为移到顶部。