如何将我的jQuery对话框居中放置？

69

我尝试了以下代码，但是它仅将对话框的左上角位置定位到中心，这使元素向右对齐。如何将对话框居中到计算元素宽度的真实中心，以便中心线将对话框切成50％50％的一半？

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

jquery  jquery-ui  dialog  jquery-dialog 
— 新手
source
2
我遇到的假设与OP所面临的问题类似。无论我做什么，对话框都位于左上角！非常沮丧。
— Nate Bunney 2012年
您的使用位置（中心）属性/技巧的技巧解决了我在手机上遇到的类似问题。但是我使用jquery-ui-1.9.2.custom。
— Michal-Areda-net，2015年

Answers:

51

我很确定您不需要设置职位：

$("#dialog").dialog();

应该默认居中。

我确实看过这篇文章，还检查了官方jquery-ui网站上有关放置对话框的内容：并讨论了两种状态：初始化和初始化后。

代码示例-（摘自jQuery UI 2009-12-03）

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

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

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

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

我认为，如果要删除position属性，则会发现它本身居中，否则请尝试第二个setter选项，在其中定义“ option”，“ position”和“ center”的3个元素。

— 卢克·杜德里奇
source
6
好吧，居中的原因是有时候您已经在对话框已加载后动态加载内容。
— isaaclw 2015年
70

最新的jQuery UI具有位置组件：

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc：http : //jqueryui.com/demos/position/
获取：http : //jqueryui.com/download

— 为什么不雨果
source
13
我遇到了麻烦，因为它有时会更改对话框内容的位置，而不是外部框的位置，所以这对我$('#myDialog').dialog('widget').position({my:"center", at:"center", of:window)}
— 有用
1
当我向下滚动并触发此功能时，在Safari 6.2.3上这不适用于我，该元素将位于视口下方。
— gamov
1
@semmelbroesel$('#myDialog').dialog('widget')和$('#myDialog').parent()都可以。
— actaram '16
1
$（'＃MyDialog'）。dialog（'option'，'position'，{my：“ center”，at：“ center”，of：window}）
— Joe DF
@JoeDF答案正常工作。但这在iOS野生动物园中不起作用。有谁有主意，为什么？
— PiyaModi
19

因为对话框需要一个位置，所以您需要包含js位置

<script src="jquery.ui.position.js"></script>
— 普罗霍
source
宾果游戏-我们有一个赢家。那是我的问题。谢谢！
— 克里斯·霍尔姆斯
优秀的！感谢那。无法弄清楚为什么它不起作用
— space_balls
11

因此，如果有人像我一样点击此页面，或者当我在15分钟内忘记该页面时，我正在iframe（blah）中使用jqueryui对话框版本1.10.1和jquery 1.9.1和ie8，并且需要在它不起作用，即

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

感谢@ vm370为我指出正确的方向。

— 麦克风
source
1
我不必使用，within但之所以投票赞成，是因为它使用了position属性，就像这样：$('.selector').dialog({ position: my: "center bottom", at: "center top", of: $("#submitbutton") });而不是在结尾添加呼叫：$('.selector').position(...)
— LosManos
这很有意义。谢谢。
— hsuk
11 
open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}
— 让·保罗·阿卡·埃尔维特
source
1
我喜欢这个解决方案，与window.scrollTo(0, 0);它结合使用对我来说非常
— 有用
@MaVRoSCy，我遇到了类似的问题。如果我滚动然后打开对话框，它将不会居中。您如何使用scrollTo以及如何在其中添加它？
— user1527762
@ user1527762您是否尝试过使用：autoReposition：true，作为jquery ui对话框实例的初始化参数？此外，您可以简单地使用类似以下内容的方法：jQuery（window）.on（'resize'，function（），并将其绑定到与上面类似的逻辑，但是使用api.jqueryui.com/dialog/#method中
— Jean Paul AKA el_vete 2015年
我使用此代码来确保当有滚动条时它位于窗口中间： left: (window.innerWidth - $(this).parent().parent().outerWidth())/2, top: (window.innerHeight - $(this).parent().parent().outerHeight())/2
— Doctor Parameter
1
@Blake Parmenter：如果op拥有处理窗口的自由，也许resizeTo（x，y）javascript本机函数有助于确保窗口或查找全屏api也可以正常工作:)这是确保基于ui的jquery对话框窗口非常适合查看器的屏幕，但它可能会要求执行权限，并且如果在导航浏览器中启用了选项卡式或弹出式阻止程序，则可能会发生问题
— Jean Paul AKA el_vete
7

要确定中心位置，我使用：

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
— 爱德华多·库莫（Eduardo Cuomo）
source
我认为您需要$（w）。另外，这似乎与浏览器中的滚动处理无关。
— 克里斯·普林斯
@Chris Prince不一定，我认为导航浏览器足够智能，可以知道我们在该实例中所指的是窗口，我可能是错的，但实际上如果应该是w = $（window）; 快速解决此问题的方法。这种方法很有趣，因为每次打开对话框时，它都会寻找窗口，该窗口充当窗口大小调整功能调用，因此这就是我赞成的原因，尽管我通常必须在使用时添加它对话框中的打开函数我也关闭使用了this.dialog（'destroy'），以允许重用，特别是在jQuery UI主题中
— Jean Paul AKA el_vete
6

尝试这个....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
— 里金·帕特尔
source
5

我必须dialog()两次调用函数来定位对话框（jQuery v1.11.2 / jQueryUI v1.10.4）。

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
— 好吧
source
我也是。你的建议使我固定。您找到更好的解决方案了吗？沿着某个地方，我更改了jQuery的版本，并且开始出现此问题。降级并不能解决问题。更新：我将位置对象设置为第一个参数组，并且仍然有效
— 乍得
4

Jquery UI 1.9.2，jquery和更高版本不支持IE8

我找到了两个解决方案。

  1. 回滚jquery UI 1.7.2以支持IE8，

  2. 尝试使用此代码 Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
— 阿伦
source
在IE11中使用jQueryUI 1.11.4可以完美工作
— Johnny Bones
由于内部参数为+1，因此可以像对appendTo此元素一样进行对接，如果使用模式窗口，则可以限制对接。
— Jean Paul AKA el_vete
3

另一件事会让JQuery Dialog定位给您带来麻烦，尤其是对于大于浏览器视图端口的文档-您必须添加声明

<!DOCTYPE html>

在文档的顶部。

没有它，jQuery倾向于将对话框放在页面底部，并且在尝试拖动它时可能会发生错误。

— 德士
source
2

您是否仅在IE中遇到此问题？如果是这样，请尝试将其添加到页面的HEAD标记的第一行：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

尽管所有兼容性问题在以后的jQueries中都得到了解决，但是我今天遇到了这个问题。

— 约翰
source
2

如果在移动设备上使用jQuery ui，则还需要进行手动重新居中-通过“ left＆top” css属性手动定位对话框。如果用户切换方向，则定位不再居中，之后必须进行调整/重新居中。

— ek
source
gekido：您是否建议使用此方法？
— Jean Paul AKA el_vete 2015年
我前一阵子曾为此奋斗过，但我们在移动设备上的jQuery对话框存在许多问题。基本上，它们的效果很好-直到用户切换设备的方向为止。记不清已应用的特定修复程序，但是基本上我们检查了方向是否已更改，然后重新放置对话框。绝对感到有点hacky，但它确实有效。
— gekido
2

我对此有疑问，终于找到了答案。直到今天，我使用的是jQuery的真正旧版本1.8.2。

我在任何使用dialog过的地方都使用以下位置选项对其进行了初始化：

$.dialog({
    position: "center"
});

但是，我发现position: "center"用正确的语法删除或替换它并不能解决问题，例如：

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

尽管以上是正确的，但我也在使用 option在我加载页面时习惯于将位置设置为中心，就像这样：

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

这导致我所有的对话框窗口都停留在视口的左上方。

我必须用下面的正确新语法替换所有这些实例：

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);
— 路加
source
2

对于Win7 / IE9环境，只需在您的CSS文件中设置：

.ui-dialog {
   top: 100px;
   left: 350px !important;
}
— 尼古拉
source
0

我用CSS解决了： 

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}
— 力科
source
-1

无法使IE9居中对话框。

通过将其添加到css中来修复它：

.ui-dialog {
    left:1%;
    right:1%;
}

百分比无所谓。任何少数人都可以工作。

— SwellBuilt
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.