javascript - 如何将对话框定位到窗口的中心

Question

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

    

    $("#address_book").click(函数 (e)
      {
          …………

         显示对话框（假）；
         e.preventDefault();
        ...........
      });

    函数显示对话框（模态）{

    ……  
      $("#overlay").show();

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

      如果（模态）
      {

         $("#overlay").unbind("点击");
      }
      别的
      {
         $("#overlay").click(函数 (e)
         {
            隐藏对话（）；
         });
      }
     }
    

我希望对话框位于窗口的中心。谁能告诉我该怎么做

Answer 1

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

  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，在不同的应用 Demo

注意：你的#dialog 应该有，position:absolute在它的css中，为了定位那个 div

Answer 2

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

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

Answer 3

在 jQuery 中试试这个：

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

这应该有效。

Answer 4

$('#mycustomdialogDiv').css({ top: 100, left:100 });

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

Answer 5

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

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

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

Answer 6

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

1. 不同的浏览器已经将对话框置于中间，但即便如此，方式也不同！
2. 您只能使用变换重新计算自己的宽度定位（不能使用边距等）

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

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