Question

我正在使用jQuery弹出窗口，只是想知道当我更改浏览器窗口宽度时如何使框保持居中，目前它在页面加载时获得中心点并在我更改宽度时保持在该位置。 / p>

这是我用于弹出功能的代码：

 //Popup dialog
 function popup(message) {

// get the screen height and width  
var maskHeight = $(document).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment     
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 

// Set overlay to fill screen
$("#dialog-overlay").css("width","100%").fadeIn();

// Set dialogue box 80px from top and central
$('#dialog-box').css({top:80, left:dialogLeft}).fadeIn();

// display the message
//$('#dialog-message').html(message);

// Close button fades out overlay and message   
$('.button').live('click',function()
{
    $(this).parent().fadeOut();
    $('#dialog-overlay').fadeOut();
    return false;
});

 }

Answer 1

JavaScript解决方案是使用window.onresize，只要窗口大小发生任何变化就会触发。

window.onresize = function() {
    var maskWidth = $(window).width();
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
    $('#dialog-box').css({top:80, left:dialogLeft});
}

可能最好将内部代码放入一个函数中以保存重复内容。

Answer 2

除非你需要支持IE6，否则看看使用position：fixed并在CSS而不是JS中完成大部分工作可能是有意义的。

E.g。

#dialog-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#dialog-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 500px;
    margin: -250px 0 0 -200px; /* width and height divided by 2 */
}

然而，假设您有一个固定的宽度/高度对话框。

更改pagesize时，中心jquery弹出框

2 个答案: