jquery+CSS實現(xiàn)懸浮登錄框遮罩

更新時間：2022年03月30日 14:29:01 作者：kylinxjd

這篇文章主要為大家詳細(xì)介紹了jquery+CSS實現(xiàn)懸浮登錄框遮罩，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery+CSS實現(xiàn)懸浮登錄框遮罩的具體代碼，供大家參考，具體內(nèi)容如下

先上效果圖，陰影部分無法點擊

HTML代碼

<div style="display: none" class="shadow" id="shadow"></div>
<div style="display: none" id="login-box" class="login-box">
? ? <div class="close-btn">
? ? ? ? <img src="./img/close.jpg" width="30" height="30" id="close-login-btn" alt="">
? ? </div>
? ? <div class="input-item">
? ? ? ? <label for="username">用戶名</label>
? ? ? ? <input type="text" name="username" id="username" placeholder="用戶名/郵箱/手機號碼">
? ? </div>
? ? <div class="input-item">
? ? ? ? <label for="password">密　碼</label>
? ? ? ? <input type="password" name="password" id="password" placeholder="密碼">
? ? </div>
? ? <div class="input-item">
? ? ? ? <label for="check-code">驗證碼</label>
? ? ? ? <input type="text" name="check-code" id="check-code" placeholder="驗證碼">
? ? ? ? <!--<button type="button" id="get-check-code"> </button>-->
? ? ? ? <div id="req_pic_code" >
? ? ? ? ? ? <img src="" id="get-check-code" alt="">
? ? ? ? </div>
? ? ? ? <!--<img src="" id="get-check-code" alt="">-->
? ? </div>
? ? <div class="input-item">
? ? ? ? <button type="button" id="login-btn">登　錄</button>
? ? </div>
? ? <div class="input-item">
? ? ? ? <img src="./pic/QQ.jpg" width="50" height="50" alt="">
? ? ? ? <img src="./pic/微信.jpg" width="50" height="50" alt="">
? ? ? ? <img src="./pic/微博.jpg" width="50" height="50" alt="">
? ? </div>
? ? <div class="input-item">
? ? ? ? <!--登錄即代表你同意 《用戶協(xié)議》， 《隱私政策》和 中移動認(rèn)證服務(wù)協(xié)議-->
? ? ? ? <span>登錄即代表你同意</span>
? ? ? ? <a href="#">《用戶協(xié)議》</a>
? ? ? ? <span>,</span>
? ? ? ? <a href="#">《隱私政策》</a>
? ? ? ? <span>和</span>
? ? ? ? <a href="#">中移動認(rèn)證服務(wù)協(xié)議</a>
? ? </div>
</div>

css代碼

/* 半透明的遮罩層 */
.shadow {
? ? background: #000;
? ? filter: alpha(opacity=70); /* IE的透明度 */
? ? opacity: 0.5; /* 透明度 */
? ? display: none;
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? width: 100%;
? ? height: 100%;
? ? z-index: 965; /* 此處的圖層要大于頁面 */
}

.login-box {
? ? text-align: center;
? ? width: 500px;
? ? height: 350px;
? ? border-radius: 10px;
? ? /*border: 3px solid gainsboro;*/
? ? position: absolute;
? ? left: 50%;
? ? top: 50%;
? ? transform: translate(-50%, -50%);
? ? background: #ffe3e1;
? ? -webkit-box-shadow: #666 0 0 6px;
? ? -moz-box-shadow: #666 0 0 6px;
? ? box-shadow: #fff8e7 0 0 6px 6px;
? ? z-index: 996; ?/* 此處的圖層要大于遮罩圖層 */
}

jQuery代碼

//登錄，點擊登錄顯示登錄框
$("#login-link").click(function () {
? ? ? ? $("#login-box").show();
? ? ? ? $("#shadow").show();
? ? });
//關(guān)閉登錄框，點擊關(guān)閉按鈕關(guān)閉
$("#close-login-btn").click(function () {
? ? ? ? $("#login-box").hide();
? ? ? ? $("#shadow").hide();
? ? });

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: