如何将对话框放置在窗口的中心

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'
    });

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

注意：你的 #dialog 应该在它的 css 中包含position:absolute，以便定位该 div