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']）。

代码示例

使用指定的位置选项初始化对话框。 $（“。selector”）。dialog（{position：'top'}）; 在init之后获取或设置位置选项。 //消气 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()

如何在窗口中创建对话框中心？

3 个答案: