DIV实现遮盖层和DIV垂直水平居中
DIV垂直水平居中样式DIV遮盖层样式效果图
1、首先准备两个DIV
<div id="waitDiv" align="center" style="background-color:white;display:none" class="waitDiv">
<img src="${base}/sales/product/wait.gif" />
<p>正在导入，请稍后
</p>
</div>
<div id="coverDiv" style="display:block;display:none" class="coverDiv"></div>
2、设置两个DIV的CSS
<style>
.waitDiv{
display:block;
width:150px;
height:80px;
z-index:99999;
position:fixed;
top:50%;
left:50%;
margin-left: -75px;
margin-top: -40px;
}
.coverDiv{
position:fixed;
z-index:9999;
top:0px;
left:0px;
display:none;
width:100%;
height:100%;
opacity:0.5;
background:#000;
}
</style>
3、用jquery控制这两个DIV的显示和隐藏
//显示
$("#waitDiv").show();
$("#coverDiv").show();
//隐藏
$("#waitDiv").hide();
$("#coverDiv").hide();
4、效果图
灰色的部分是遮盖层，白色方块是居中的DIV
转载请注明原文地址: https://ju.6miu.com/read-13879.html
