html+css+js实现遮罩层技术

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">关闭&nbsp;&nbsp;</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();
    }