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

Question

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

        $("#address_book").click(function (e)      {          .........         ShowDialog(false);         e.preventDefault();        ........      });    function ShowDialog(modal){    ....        $("#overlay").show();      $("#dialog").fadeIn(300);      if (modal)      {         $("#overlay").unbind("click");      }      else      {         $("#overlay").click(function (e)         {            HideDialog();         });      }     }    

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

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

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