Javascript 如何使对话框在窗口中居中？

我调整了jQuery UI对话框的大小，如下所示：

height: $(window).height(),
width: $(window).width(),

---

但现在它不再在窗户的中央了。是否有办法使其居中？

尝试下面的函数-根据需要更改变量

function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  console.log("The calculated position is:");
  console.log(top,left);
  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
  console.log('A jQuery selection:');
  console.log($('#lightbox'));
}

---

指定对话框应显示的位置。可能值： 1） 表示视口中位置的单个字符串：“中心”、“左侧”、“右侧”、“顶部”、“底部”。 2） 从视口左上角的像素偏移量中包含x、y坐标对的数组（例如[350100]） 3） 包含x、y位置字符串值的数组（例如，右上角的[right'、[top']）

代码示例

使用指定的位置选项初始化对话框。 $（“.selector”）.dialog（{position:'top'}）； 在init之后获取或设置position选项。 //吸气剂 变量位置=$（“.selector”）。对话框（“选项”、“位置”）； //塞特 $（“.selector”）。对话框（“选项”、“位置”、“顶部”）

---

如果对话框使用

绝对定位

定位，则可以在调整大小后尝试此操作：

$('#dialog').animate({ 
    'top' : ($(window).height() - $('#dialog').outerHeight()) / 2 + $(document).scrollTop(),
    'left': ($(window).width() - $('#dialog').outerWidth()) / 2 + $(document).scrollLeft()
});

这将把对话框移到中间

否则，如果对话框使用

fixed

定位，则可以从计算中忽略

$（document）.scrollTop（）

和

$（document）.scrollLeft（）

$('#dialog').animate({ 
    'top' : ($(window).height() - $('#dialog').outerHeight()) / 2 + $(document).scrollTop(),
    'left': ($(window).width() - $('#dialog').outerWidth()) / 2 + $(document).scrollLeft()
});