Question

我有一个jQuery对话框，意思是位于屏幕中间。但是，它似乎略微偏离垂直中心。

以下是代码：

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

为什么这不会成为中心的任何想法？

Answer 1

如果在对话框显示后滚动视口，它将不再居中。通过在页面中添加/删除内容，可能会无意中导致视口滚动。您可以通过调用：

在滚动/调整大小事件期间重新定位对话框窗口

$('my-selector').dialog('option', 'position', 'center');

Answer 2

您是否在页面中添加了jquery.ui.position.js？我遇到了同样的问题，检查了源代码here并意识到我没有将js添加到我的页面，之后...对话框神奇地居中。

Answer 3

在这里挖掘一个古老的坟墓，但是对于新的谷歌搜索者来说。

通过将此事件添加到对话框，您可以在用户滚动时保持模型窗口的位置。这会将它从绝对位置更改为固定位置。无需监控滚动事件。

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

Answer 4

我遇到了同样的问题。它最终成为 jquery.dimensions.js 插件。如果我删除它，一切正常。我之所以包含它是因为需要它的另一个插件，但是我从链接here中发现，不久之前维度包含在jQuery核心中（http://api.jquery.com/category/dimensions）。你应该可以简单地删除维度插件。

Answer 5

1。）jQuery对话框以您放入的任何元素为中心。

如果没有更多信息，我的猜测是你有一个带有边距或类似东西的身体div。将弹出式div移动到身体级别，你会很高兴。

2。）如果在加载div时动态地向div添加内容，则居中将不正确。在你输入数据之前，不要显示div。

Answer 6

只需在同一页面中添加以下CSS行。

.ui-dialog 
{
position:fixed;
}

Answer 7

将此添加到对话框声明

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

示例：

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Answer 8

要解决此问题，我确保将我的身高设置为100％。

body { height:100% }

这也会在用户滚动时保持中心位置。

Answer 9

此问题通常与通过锚标记（<a href='#' id='openButton'>Open</a>）打开对话框有关，而不是阻止处理程序中的默认浏览器行为，例如。

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

这通常不需要任何定位/滚动插件。

Answer 10

对我来说，jquery.dimensions.js是Culprit

Answer 11

我的场景：我不得不在页面上向下滚动按钮点击打开对话框，由于窗口滚动，对话框没有垂直打开到窗口中心，它已经离开了视口

正如 Ken 上面提到的那样，在您将模态内容设置为执行以下语句之后。

$("selector").dialog('option', 'position', 'center');

如果在模态打开之前预先加载了内容，只需在打开的事件中执行此操作， else在open事件中操作DOM然后执行语句。

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

它对我来说效果很好，最好的是你没有包含任何其他插件或库来使用它。

Answer 12

上述解决方案似乎都不适用于我，因为我的代码动态生成两个包含div并且在其中包含未缓存的图像。我的解决方案如下：

请注意img上的'load'调用，以及对话框调用中的'close'参数。

var div = jQuery('<div></div>')
                  .attr({id: 'previewImage'})
                  .appendTo('body')
                  .hide();
var div2 = jQuery('<div></div>')
                  .css({
                      maxWidth: parseInt(jQuery(window).width() *.80) + 'px'
                      , maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

Answer 13

刚刚解决了同样的问题，问题是我没有导入一些js文件，比如widget.js：）

Answer 14

我必须将其添加到HTML文件的顶部：<!doctype html>。我不需要设置position属性。这是与jQuery 3.2.1。在1.7.1中，这不是必需的。

Answer 15

$('#dlg').dialog({
    title: 'My Dialog',
    left: (parseInt(jQuery(window).width())-1200)/2,
    top:(parseInt(jQuery(window).height())-720)/2,
    width: 1200,
    height: 720,
    closed: false,
    cache: false,
    modal: true,
    toolbar:'#dlg-toolbar'
});

Answer 16

这是我解决问题的方法，我添加了对话框的这个开放功能：

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

现在，无论页面滚动到何处以及在所有浏览器中，都会在屏幕顶部打开对话框。

Answer 17

将对话框放在屏幕中央：

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});

Answer 18

我遇到了同样的问题，当我输入对话框的高度时修复了这个问题：

$("#dialog").dialog({
    height: 500,
    width: 800
});

Answer 19

您必须添加声明

位于文档的顶部。

没有它，jquery会将对话框放在页面底部，并且在尝试拖动时可能会出错。

Answer 20

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

这个解决方案确实有效，但仅仅是因为较新的jQuery版本完全忽略了这个并且回退到默认值，正是这个。因此，如果您只想让弹出窗口居中，您可以从选项中删除位置：'center'。

Answer 21

我正在升级jQuery UI的旧实例，发现对话框小部件有一个扩展，它只是使用"center"而不是position对象。实现position对象或删除参数完全对我有用（因为默认为center）。

Answer 22

以上解决方案均不适合我。如果有人遇到相同的问题，我将在我的方案和最终解决方案下面介绍。

方案：：我使用自定义jQuery插件向位于对话框内的HTML元素添加滚动条。

我用作了

$(response).dialog({
 create: function (event, ui) {
  $(".content-topp").mCustomScrollbar();
 })
});

解决方案是将其从create移至open，如下所示：

$(response).dialog({
 open: function (event, ui) {
  $(".content-topp").mCustomScrollbar();
  $(this).dialog('option', 'position', 'center');
 })
});

因此，如果您使用任何可操纵内容的自定义jQuery插件，请使用open事件对其进行调用。

Answer 23

已解决... 此问题的解决方案是在 HTML 代码中缺少声明。如果你那里没有这个声明。 JQuery UI 对话框的垂直居中无法正常工作。

jQuery UI对话框未定位中心屏幕

23 个答案: