利用js让有绝对定位的盒子居中
初始化的时候
var show = function(){
dialogBg.style.display = "block";
dialog.style.display = "block";
dialog.style.left = (dialogBg.offsetWidth-dialog.offsetWidth)/2+"px";
dialog.style.top = (dialogBg.offsetHeight-dialog.offsetHeight)/2+"px";
};
show();
监听resize事件,如果页面改变,则会动态居中
obj.addEvent(window,"resize",function(){
dialog.style.left = (dialogBg.offsetWidth-dialog.offsetWidth)/2+"px";
dialog.style.top = (dialogBg.offsetHeight-dialog.offsetHeight)/2+"px";
});
结构
<div class="dialogBg"></div>
<div class="dialog"></div>
css样式
.dialogBg {
background: rgba(44,44,44,0.4);
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
display: none;
}
.dialog {
position: absolute;
width: 320px;
height: 200px;
cursor: move;
display: none;
}