HTML + CSS + JQuery实现弹框

<style type="text/css">
#fullbg {
background-color: gray;
left: 0;
opacity: 0.6;
position: absolute;
top: 0;
z-index: 50000;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

#dialog {
left: 43%;
margin: -200px 0 0 -200px;
position: fixed !important; /*  浮动对话框 */
position: absolute;
top: 30%;
z-index: 100000;
display: none;
}
</style>

<div id="fullbg"></div>
<div id="dialog">
<div id="remarkDiv"
style="margin-left: 0px; width: 100%;background-color: #e5e5e5;border-radius:10px;">
<div id="dialogTitleDiv" style="background-color:#a7c0ce;border-radius:10px 10px 0 0;height:40px;font-size:20px;font-weight:bold;padding-top:15px;" align="center">
备注
</div>
<div id="dialogContentDiv" style="padding:20px 10px 0 10px;">
<textarea rows="5" style="width:350px;" id="auditRemark"></textarea>
</div>
<span  align="center" name='errMsgTip' style="display:block;color:red;"></span>
<div align="center" bgcolor="#cccccc">
<input type="button" value="关闭" style="width:120px;margin-bottom:15px;"  onclick="closeBg()" class="btn" />
<input type="button" value="提交" style="width:120px;margin-bottom:15px;"  onclick="" class="btn" />
</div>
</div>
</div>

<script type="text/javascript">
function showBg() {
$("#dialog").show();
$("#remarkDiv").show();
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height : bh,
width : bw,
display : "block"
});
}

//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
$("[name='errMsgTip']").text('')
}
</script>