我们在做PC端项目的时候,经常会写弹出框遮罩的提示内容。所以为了方便以后的使用,在这里对此做一个总结。
HTML:
<!-- 遮罩弹框 -->
<div id="fullbg"></div>
<div id="dialog">
<p class="close"><a href="#" onclick="closeBg();">X</a></p>
<!-- 此处写弹出框中需要添加的内容 -->
</div>
CSS:
/* 首页遮罩弹框 */
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color: #fff;
height: 446px;
left: 50%;
margin: -223px 0 0 -263px;
padding: 1px;
position: fixed !important;
position: absolute;
top: 50%;
width: 526px;
z-index: 5;
border-radius: 5px;
display: none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background: #f4eeee;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color: #000;
text-decoration:none;
}
JS:
/**
* 打开弹框
* */
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height:bh,
width:bw,
display:"block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
这样基本就可以实现想要的弹框遮罩效果啦