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，所以它可以在没有任何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

Answer 2

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

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

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（{ 上：100，左：100 }）;

有时这段代码不适用于jquery，因为jquery对话框会在customdialogdiv元素上生成自己的包装器。为了实现它，使用下面的代码; $（ '＃mycustomdialogDiv'）。父（ 'DIV'）。CSS（{ 上：100，左：100 }）;

Answer 5

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

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

这样做的好处是，如果调整寡妇的大小，无论如何它将居中。

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

5 个答案: