如何实现html遮罩层以及弹出框?

我们在做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();
}

这样基本就可以实现想要的弹框遮罩效果啦