40

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

这是代码：

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

任何想法为什么这不会居中？

4

24 回答 24

51

如果您的视口在对话框显示后滚动，它将不再居中。通过在页面中添加/删除内容可能会无意中导致视口滚动。您可以通过调用以下方法在滚动/调整大小事件期间使对话框窗口居中：

$('my-selector').dialog('option', 'position', 'center');
于 2009-09-24T00:17:15.333 回答
34

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

于 2010-11-11T21:30:56.243 回答
28

在这里挖掘一个旧坟墓，但为新的谷歌搜索者。

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

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}
于 2011-03-25T04:51:46.047 回答
14

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

于 2011-04-15T15:10:31.867 回答
11

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

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

2.) 如果您在加载时动态地将内容添加到 div，则居中将不正确。在您将数据放入其中之前，请勿显示 div。

于 2009-09-24T01:10:27.053 回答
11

将此添加到您的对话框声明中

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

例子 ：

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
        position: {
            my: "center",
            at: "center",
            of: window
        }
})
于 2014-07-15T13:46:52.460 回答
10

只需在同一页面的 CSS 行下方添加即可。

.ui-dialog 
{
position:fixed;
}
于 2012-10-06T19:43:28.363 回答
9

为了解决这个问题，我确保我的身高设置为 100%。

body { height:100% }

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

于 2014-04-24T11:16:54.873 回答
4

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

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

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

于 2013-12-30T20:31:40.230 回答
3

对我来说 jquery.dimensions.js 是罪魁祸首

于 2011-02-09T21:05:59.177 回答
2

我面临着同样的问题，即对话框没有居中打开并将我的页面滚动到顶部。我用来打开对话框的标签是一个锚标签：

<a href="#">View More</a>

英镑符号对我来说是个问题。我所做的只是修改锚中的 href，如下所示：

<a href="javascript:{}">View More</a>

现在我的页面很高兴并且使对话框居中。

于 2013-01-03T21:51:45.047 回答
2

我的场景：我不得不在页面上向下滚动以在单击按钮时打开对话框，由于窗口滚动，对话框没有垂直打开到窗口的中心，它超出了视口。

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

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

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

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

它对我来说效果很好，最好的事情是你不包含任何其他插件或库来让它工作。

于 2014-06-17T06:46:02.230 回答
2 
$('#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'
});
于 2020-10-08T10:56:10.107 回答
1

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

于 2011-06-02T11:42:21.753 回答
1

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

请注意 img 上的“加载”调用和对话框调用中的“关闭”参数。

var div = jQuery('<div></div>')
                  .attr({id: 'previewImage'})
                  .appendTo('body')
                  。隐藏（）;
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（函数（）{
                      div.对话框（{
                          “模态”：真
                          ，“宽度”：“自动”
                          ，关闭：函数（）{
                               div.remove();
                          }
                      });
                  });
于 2013-02-26T10:06:02.270 回答
1 
$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

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

于 2016-01-22T10:03:55.260 回答
1

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

于 2017-10-21T14:18:48.410 回答
0

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

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

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

于 2012-06-11T15:22:14.637 回答
0

将对话框定位在屏幕中央：

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});
于 2014-10-28T08:32:24.990 回答
0

我有同样的问题，当我输入对话框的高度时，这个问题得到了解决：

$("#dialog").dialog({
    height: 500,
    width: 800
});
于 2014-11-24T10:12:25.317 回答
0

您必须添加声明

在文档的顶部。

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

于 2014-12-15T13:16:35.263 回答
0

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

于 2020-05-14T03:46:22.087 回答
0

以上解决方案都不适合我。我将在下面介绍我的方案和最终解决方案，以防万一有人遇到同样的问题。

场景：我使用自定义 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事件调用它。

于 2020-10-27T12:44:38.407 回答
0

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

于 2021-05-26T09:08:15.190 回答