溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法

發(fā)布時間：2020-10-22 14:50:15 來源：億速云 閱讀：141 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

最近的項目有留言板彈出對話框，然后我就自己寫了一個靜態(tài)的，下面就直接上代碼：

<p class="fade"></p>
<p class="succ-pop">
	<h3 class="title">
		這里是要填寫的內(nèi)容
	</h3>
</p>
/*灰色遮罩層*/
.fade {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
   left: 0;
   top: 0;
   z-index: 2;
}
/*彈出層*/
.succ-pop {
   width: 400px;
   height: 300px;
   background: #fff;
   position: fixed;/*這里的定位可以根據(jù)自己喜好選擇absolute或者fixed*/
   left: 50%;	
   top: 50%;/*這里的top根據(jù)自己的需要定*/
   margin-left: -200px;
   margin-top: -150px;
   z-index: 3;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.succ-pop h3.title {
   text-align: center;
   color: lightskyblue;
}

如果你不希望有彈框的時候頁面還會滾動，那就加上$('body').css('overflow-y','hidden');就可以了。

感謝你能夠認真閱讀完這篇文章，希望小編分享css實現(xiàn)彈出對話框同時出現(xiàn)遮罩層的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手