0

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

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

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

 }
4

2 回答 2

2

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

可能最好将内部代码放入函数中以节省重复。

于 2012-05-15T09:08:45.940 回答
0

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

例如

#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 */
}

但是，这假设您有一个固定的宽度/高度对话框。

于 2012-05-15T09:09:30.847 回答