jQuery UI对话框没有定位中心屏幕
我有一个jQuery对话框，旨在位于屏幕中间。 但是，它似乎有点偏离中心垂直。
这里是代码：
$('#add_box').dialog({ autoOpen: true, width: 300, modal: true, resizable: false, bgiframe:true }); 任何想法，为什么这不会中心？
如果您的视口在对话框显示后滚动，它将不再居中。 可能会无意中通过添加/删除页面中的内容来导致视口滚动。 在滚动/resize事件期间，您可以通过调用以下命令来重新对话窗口：
$('my-selector').dialog('option', 'position', 'center');
您是否将jquery.ui.position.js添加到您的页面？ 我有同样的问题，在这里检查了源代码，并意识到我没有添加该js到我的网页，之后..对话神奇居中。
在这里挖掘一个古老的坟墓，但为新的谷歌search者。
通过将此事件添加到对话框中，您可以在用户滚动时保持模型窗口的位置。 这将把它从绝对定位变为固定。 无需监视滚动事件。
open: function(event, ui) { $(this).parent().css('position', 'fixed'); }
我遇到了同样的问题。 它最终成为jquery.dimensions.js插件。 如果我删除它，一切正常。 我把它包括了，因为另一个需要它的插件，但我从这里发现，尺寸包括在jQuery核心不久前（ http://api.jquery.com/category/dimensions ）。 你应该可以简单地删除尺寸插件。
只需在同一页面添加下面的CSS行。
.ui-dialog { position:fixed; }
1）jQuery对话框以你插入的任何元素为中心。
没有更多的信息，我的猜测是你有一个边缘或类似的东西。 将popup的div移动到身体级别，你就可以走了。
2.）如果您在加载时dynamic地向div添加内容，则居中将不正确。 不要显示div，直到你有你的数据放入它。
要解决这个问题，我确保我的身高设置为100％。
body { height:100% }
当用户滚动时，这也保持中心位置。
对我来说，jquery.dimensions.js是罪魁祸首
这个问题通常与通过锚标签（ <a href='#' id='openButton'>Open</a> ） <a href='#' id='openButton'>Open</a>对话框有关，而不是阻止处理程序中的默认浏览器行为
$('#openButton').click(function(event) { event.preventDefault(); //open dialog code... });
这通常不需要任何定位/滚动插件。
将此添加到您的对话声明中
my: "center", at: "center", of: window
例如：
$("#dialog").dialog({ autoOpen: false, height: "auto", width: "auto", modal: true, my: "center", at: "center", of: window })
我正面临同样的问题，让对话框不能打开，并将页面滚动到顶部。 我用来打开对话框的标签是一个锚标签：
<a href="#">View More</a>
英镑符号导致我的问题。 我所做的只是修改锚点中的href，如下所示：
<a href="javascript:{}">View More</a>
现在我的页面很高兴并且把对话框居中。
我的情景：我不得不向下滚动页面以打开一个button单击对话框，由于窗口滚动对话框没有垂直打开中心到窗口，它正在从视口移出。
正如Ken上面提到的那样，在你设置你的模态内容之后执行下面的语句。
$("selector").dialog('option', 'position', 'center');
如果内容是在模式打开之前预先加载的，只需在打开的事件中执行此操作，否则在打开的事件中操作DOM，然后执行语句。
$( ".selector" ).dialog({ open: function( event, ui ) { //Do DOM manipulation if needed before executing below statement $(this).dialog('option', 'position', 'center'); } });
它对我来说工作得很好，最好的事情是你不包括任何其他插件或库来工作。
刚刚解决了同样的问题，问题是我没有导入一些js文件，如widget.js 🙂
上面的解决scheme似乎没有为我工作，因为我的代码dynamic生成两个包含div，并在其中一个未caching的图像。 我的解决scheme如下：
请注意img上的“load”调用，以及对话框调用中的“close”参数。
var div = jQuery（'<div> </ div>'）
.attr（{id：'previewImage'}）
.appendTo（ '主体'）
。隐藏（）;
var div2 = jQuery（'<div> </ div>'）
的CSS（{
maxWidth：parseInt（jQuery（window）.width（）* .80）+'px'
，maxHeight：parseInt（jQuery（window）.height（）* .80）+'px'
，溢出：“自动”
}）
.appendTo（DIV）;
var img = jQuery（'<img>'）
.attr（{'src'：url}）
.appendTo（DIV2）
.load（function（）{
div.dialog（{
'modal'：是的
，'宽度'：'自动'
，closures：function（）{
div.remove（）;
}
}）;
}）;
这是我如何解决这个问题，我添加了这个对话框的打开function：
open: function () { $('.ui-dialog').css("top","0px"); }
这现在打开屏幕顶部的对话框，而不pipe页面滚动到哪里以及在所有的浏览器中。
将对话框定位在屏幕中央：
$('#my-selector').parent().position({ my: "center", at: "center", of: window });
我遇到了同样的问题，当我input对话框的高度时，问题就解决了：
$("#dialog").dialog({ height: 500, width: 800 });
您必须添加声明
在文档的顶部。
没有它，jquery倾向于把对话框放在页面的底部，当拖动它时可能会发生错误。
$("#dialog").dialog({ autoOpen: false, height: "auto", width: "auto", modal: true, my: "center", at: "center", of: window })
这个解决scheme的确行得通，但是只是因为新的jQuery版本完全忽略了这个，并且回落到默认值，这正是这个。 所以你可以从你的选项中删除位置：'中心'，如果你只想popup中心。
我不得不把这个添加到我的HTML文件的顶部： <!doctype html> 。 我不需要设置position属性。 这是与jQuery 3.2.1。 在1.7.1中，这是不需要的。
