我有一个弹出窗口,我正在尝试动态调整大小并保持水平居中。由于弹出窗口需要在移动和桌面环境中工作,我快速编写了一些 jQuery 来处理调整大小并在窗口宽度小于 max-width
时删除边距的弹出窗口。这一切都正常工作,除了每当我慢慢调整窗口大小时,弹出窗口默认为拥抱左边缘而不是保持居中。这是我的代码,任何帮助将不胜感激,因为 CSS 仍然让我有些头疼。
jQuery:
$(window).resize(function(){
var w = $('.body').width();
if (w > 1000) {
$('.popup_modal').css({"left": (w - 1000) / 2 + "px"});
} else if (w < 1000) {
$('.popup_modal').css({"left": "0px"});
}
});
CSS:
.popup_modal {
display: none;
width: 100%;
max-width: 1000px;
float: left;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 3px;
box-shadow: 0px 0px 5px #ccc;
position: relative;
margin-top: 20px;
padding: 20px;
}
谢谢!
最佳答案
更改此代码:
$(window).resize(function(){
var w = $(window).width;
if (w > 1000){
$('.popup_modal').css({"left" : (w-1000)/2 + "px"});
} else if (w < 1000){
$('.popup_modal').css({"left" : "0px"});
}
});
关于Jquery 窗口调整大小错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21313719/