溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹在Html5中如何實現頁面點擊遮罩層背景和關閉遮罩層效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
html代碼：
頁面上只有一個展示的按鈕，一個ID為bg的div作為灰色背景遮罩層使用，ID為popup的div作為紅包彈窗，ID為close的div作為關閉按鈕。
<body>
<div class="btn" id="btn">展示</div>
<div class="bg" id="bg">
<div class="popup" id="popup">
<div class="close" id="close">X</div>
</div>
</div>
</body>CSS代碼
css代碼里面沒什么技術難點，唯一要注意的是要給灰色背景的遮罩層一個絕對定位，top和lefe都為0就好了
body {
position: relative;
}
.btn {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
margin:20px auto 0;
border: 1px solid #333;
border-radius: 10px;
}
.bg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .6);
display: none;
}
.popup {
width: 260px;
height: 320px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
}
.popup .close {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
top: -40px;
right: 0px;
border: 1px solid #999;
border-radius: 50%;
color: #999;
}JS代碼：
var btn = document.getElementById('btn');
var bg = document.getElementById('bg');
var popup = document.getElementById('popup');
var closeBtn = document.getElementById('close');
// 點擊展示按鈕顯示彈窗
btn.addEventListener('click', ()=> {
bg.style.display = 'block';
});
// 點擊陰影遮罩層關閉彈窗
bg.addEventListener('click', (e)=> {
bg.style.display = 'none'
});
// 阻止冒泡事件，點擊彈窗不會執行父元素的點擊事件
popup.addEventListener('click', (e)=> {
e.stopPropagation();
});
// 點擊關閉符號關閉彈窗
closeBtn.addEventListener('click', (e)=> {
e.stopPropagation();
bg.style.display = 'none'
})以上是“在Html5中如何實現頁面點擊遮罩層背景和關閉遮罩層效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
