html
<a href="javascript:void(0);" class="btn-submit">我要报名</a>
<div id="fullbg"></div>
<div id="dialog">
<p class="close"><a href="#" onclick="closeBg();">关闭</a>
</p>
<p class="til">您已成功报名</p>
<p class="content">2015成都汽车消费展</p>
<p class="btn"><button onclick="closeBg()">确认</button></p>
<!--<div>正在加载，请稍后....</div>-->
</div>
css
#fullbg {
background-color:#000;
left:0;
opacity:0.6;
position:absolute;
top:0;
z-index:4;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity:0.6;
}
#dialog {
background-color:#fff;
height:auto;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
padding-bottom: 15px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:500px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
}
#dialog .til{font-family: "microsoft yahei";font-size: 24px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 10px;color: #e94715;}
#dialog .content{font-family: "microsoft yahei";font-size: 36px;text-align: center;border-bottom: 1px solid #ddd;padding-bottom: 20px;color: #222;margin-top: 25px;}
#dialog p.btn{text-align: center;}
#dialog button{padding: 5px 10px;display: inline-block;margin: 0 auto;}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#ddd;
text-decoration:none;
}
js
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = jQuery("body").height();
var bw = jQuery("body").width();
jQuery("#fullbg").css({
height: bh,
width: bw,
display: "block"
});
jQuery("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
jQuery("#fullbg,#dialog").hide();
}
$('.btn-submit').click(function(){
showBg();
})
提示：你可以先修改部分代码再运行。
