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();
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章