css
.shadow{
width:89%;
height:100%;
position:absolute;
right:0;
top:0;
z-index:998;
background-color:#000;
opacity:0.8;
display:none;
}
.addBox{
z-index:999;
}
.close{
position: absolute;
top: 80px;
left: 80px;
}
/******form表单******/
.shadow_form{
position: absolute;
top: 20%;
left: 46%;
color: white;
}
/********遮罩层按钮样式**********/
.btn_addUser,.btn_updateUser{
width: 200px;
margin-top: 10px;
margin-left: 60px ;
padding:8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size:125%
}
html
<div class="shadow shadow_user">
<div id="addBox" class="addBox">
<a href="javascript:;" οnclick="jQuery('.addBox').hide();jQuery('.shadow').hide();" class="close" style="color: white">关闭 </a>
<form class="shadow_form" id="shadow_form">
<h1>添加用户信息</h1>
<div class="form-group">
<label for="a_username">用户帐号</label>
<input type="text" class="form-control" name="username" id="a_username" placeholder="用户名">
</div>
<div class="form-group">
<label for="a_name">用户名</label>
<input type="text" class="form-control" name="name" id="a_name" placeholder="用户名">
</div>
<div class="form-group">
<label for="a_password">用户密码</label>
<input type="text" class="form-control" name="password" id="a_password" placeholder="用户密码">
</div>
<div class="form-group">
<label for="a_telephone">电话号码</label>
<input type="text" class="form-control" name="telephone" id="a_telephone" placeholder="电话号码">
</div>
<div class="form-group">
<label for="a_email">邮箱地址</label>
<input type="text" class="form-control" name="email" id="a_email" placeholder="邮箱地址">
</div>
<span class="btn_addUser" id="btn_addUser">添加</span>
</form>
</div>
</div>
js
/************遮罩层弹出************/
function addClick(){
$(".shadow_user").css({'display':'block'});
$('.addBox').show();
}