如何将对话框定位到窗口的中心答案

【问题标题】：How to position a dialog box to the centre of a window如何将对话框定位到窗口的中心
【发布时间】：2012-10-31 20:07:09
【问题描述】：

谁能告诉我如何使用 JQuery 将框定位到窗口的中心。我将粘贴下面的代码：-

$("#address_book").click(函数 (e) { ………… 显示对话框（假）； e.preventDefault(); ........... }); 函数显示对话框（模态）{ …… $("#overlay").show(); $("#dialog").fadeIn(300); 如果（模态） { $("#overlay").unbind("点击"); } 别的 { $("#overlay").click(函数 (e) { 隐藏对话（）； }); } }

我希望对话框位于窗口的中心。谁能告诉我如何做到这一点

【问题讨论】：

同时发布您的 html 和 css 代码。

标签： javascript css jquery-ui

【解决方案1】：

下面的代码不是jquery，而是纯javascript，所以它可以在没有任何hickup的情况下工作

  var dialog = document.getElementById('dialog')
  dialog.style.top = ((window.innerHeight/2) - (dialog.offsetHeight/2))+'px';
  dialog.style.left = ((window.innerWidth/2) - (dialog.offsetWidth/2))+'px';

使用 jquery 的相同代码

  $('#dialog').css({
      top: ((window.innerHeight/2) - ($('#dialog').height()/2))+'px',
      left:((window.innerWidth/2) - ($('#dialog').width()/2))+'px'
    });

代码演示，在不同的应用程序中 Demo

注意：您的#dialog 应该在其 css 中有 position:absolute，以便定位该 div

【讨论】：

在某个地方我们必须设置 margin:auto 以便弹出位置正确。希望它会帮助一些人..

【解决方案2】：

只要您在打开之前将所有内容放入其中，jQueryUI 对话框就会自动居中。

但是它们将始终相对于浏览器窗口居中，而不是任何父“容器”元素，因为 jQueryUI 会从 DOM 中删除转换为对话框的元素并将其重新附加到 document.body。

【讨论】：

【解决方案3】：

在 jQuery 中试试这个：

$("#dialog").css("margin-top", ($(document.height() - $(this).height())/2);
$("#dialog").css("margin-left", ($(document.width() - $(this).width())/2);

这应该可行。

【讨论】：

【解决方案4】：

$('#mycustomdialogDiv').css({ 最高：100，左：100 });

有时此代码不适用于 jquery，因为 jquery 对话框会在您的 customdialogdiv 元素上生成自己的包装器。为了实现它，请使用以下代码； $('#mycustomdialogDiv').parent('div').css({ 最高：100，左：100 });

【讨论】：

【解决方案5】：

如果您知道对话框的高度和宽度，您可以设置：

top: 50%;
left: 50%;
margin-top: -[HEIGHT/2]px;
margin-left: -[WIDTH/2]px;

这样做的好处是，如果调整寡妇的大小，它无论如何都会在中心。

【讨论】：

【解决方案6】：

最好用 css 和 transform 来做，因为..

不同的浏览器已经将对话框置于中间，但即便如此，其方式也不同！
只能用transform重新计算自己的宽度定位（不能用margin等）

dialog {
    position: absolute;
    left: 50vw;
    top: 50vw;
    transform: translate(-50%, -50%);
    margin: 0; /*reset some browser centering*/
}

如果出于某种原因你真的需要 jquery，只需使用上面的 css 添加一个带有 jQuery 的类

【讨论】：