溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css實現彈出對話框同時出現遮罩層的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
最近的項目有留言板彈出對話框，然后我就自己寫了一個靜態的，下面就直接上代碼：
<p class="fade"></p> <p class="succ-pop"> <h3 class="title"> 這里是要填寫的內容 </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;/*這里的定位可以根據自己喜好選擇absolute或者fixed*/
left: 50%;
top: 50%;/*這里的top根據自己的需要定*/
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實現彈出對話框同時出現遮罩層的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
