Html5頁面點(diǎn)擊遮罩層背景關(guān)閉遮罩層
發(fā)布時間：2020-11-30 15:45:38 作者：快樂的前端小菜鳥 
我要評論
我要評論這篇文章主要介紹了Html5頁面點(diǎn)擊遮罩層背景關(guān)閉遮罩層，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
今天團(tuán)隊(duì)同事接到一個需求，需求是這樣的，點(diǎn)擊頁面按鈕彈出紅包彈窗，顯示黑色遮罩層，點(diǎn)擊遮罩層背景和彈窗關(guān)閉按鈕要關(guān)閉彈窗，于是我就做了一個Demo出來，方便以后下次自己再遇到這種需求，上代碼。
html代碼
頁面上只有一個展示的按鈕，一個ID為bg的div作為灰色背景遮罩層使用，ID為popup的div作為紅包彈窗，ID為close的div作為關(guān)閉按鈕。
<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代碼里面沒什么技術(shù)難點(diǎn)，唯一要注意的是要給灰色背景的遮罩層一個絕對定位，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');
// 點(diǎn)擊展示按鈕顯示彈窗
btn.addEventListener('click', ()=> {
bg.style.display = 'block';
});
// 點(diǎn)擊陰影遮罩層關(guān)閉彈窗
bg.addEventListener('click', (e)=> {
bg.style.display = 'none'
});
// 阻止冒泡事件，點(diǎn)擊彈窗不會執(zhí)行父元素的點(diǎn)擊事件
popup.addEventListener('click', (e)=> {
e.stopPropagation();
});
// 點(diǎn)擊關(guān)閉符號關(guān)閉彈窗
closeBtn.addEventListener('click', (e)=> {
e.stopPropagation();
bg.style.display = 'none'
})
到此這篇關(guān)于Html5頁面點(diǎn)擊遮罩層背景關(guān)閉遮罩層的文章就介紹到這了,更多相關(guān)Html5關(guān)閉遮罩層內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
遮罩層 + Iframe實(shí)現(xiàn)界面自動顯示的示例代碼
這篇文章主要介紹了遮罩層 + Iframe實(shí)現(xiàn)界面自動顯示的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-04-26HTML實(shí)現(xiàn)遮罩層的方法 HTML中如何使用遮罩層
這篇文章主要為大家詳細(xì)介紹了HTML實(shí)現(xiàn)遮罩層的方法，Web頁面中使用遮罩層，可防止重復(fù)操作，那么如何在HTML中使用遮罩層？感興趣的小伙伴們可以參考一下2016-03-25- 彈出一個遮罩層有正在加載效果的文字，在很多場景都有看到過，下面為大家介紹下具體的實(shí)現(xiàn)2014-04-17
- 今天有任務(wù)讓加個蒙版，JS小白的我在網(wǎng)上找了個修改下，改成了JS模版以后可以重復(fù)用啦,本文將詳細(xì)介紹DIV遮罩層如何實(shí)現(xiàn)，需要的 朋友可以參考下2012-11-20
- 背景半透明，覆蓋整個可視區(qū)域的遮罩層效果在工作中經(jīng)常會遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過一個簡單的例子看看如何實(shí)現(xiàn)2011-12-08
- 背景半透明，覆蓋整個可視區(qū)域的遮罩層效果在工作中經(jīng)常會遇到，這篇文章主要介紹了當(dāng)內(nèi)容超過一屏?xí)r如何做到多瀏覽器的兼容性。 下面我們通過一個簡單的例子看看如何實(shí)現(xiàn)2011-10-30
