如何使對話框在窗口中居中？

Question

我調整了jQuery UI對話框的大小，如下所示：

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

但是現在它不再位於窗口的中央。 有什么辦法可以使它居中嗎？

Answer 1

嘗試以下功能-根據要求更改變量

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

Answer 2

指定對話框的顯示位置。 可能的值：1）代表視口中位置的單個字符串：“ center”，“ left”，“ right”，“ top”，“ bottom”。 2）包含x，y坐標對的數組，像素對距視口的左上角（例如[350,100]）3）包含x，y位置字符串值的數組（例如['right'，'top']右上角）。

代碼示例

使用指定的position選項初始化對話框。 $（“ .selector”）.dialog（{position：'top'}）; 初始化后獲取或設置位置選項。 // getter var position = $（“ .selector”）.dialog（“ option”，“ position”）; //設置$（“ .selector”）.dialog（“ option”，“ position”，'top'）;

position : 'center'

Answer 3

如果對話框使用absolute定位，則可以在調整大小后嘗試以下操作：

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

這會將對話框移到中心。

否則，如果對話框使用fixed位置，則可以從計算中省略$(document).scrollTop()和$(document).scrollLeft()