使用Vanilla Javascript關閉多個彈出消息框
[英]Close Multiple Popup Message Boxes using Vanilla Javascript
問題描述
我想知道如何通過使用Pure Javascript單擊關閉按鈕來關閉多個彈出框。
我嘗試了下面的代碼，但是沒有用。
JavaScript的
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
this.parentElement.querySelector('.popup').style.display = 'none';
});
});
HTML
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
CSS
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
2 個解決方案
解決方案1
1 2019-06-04 06:47:08
嘗試這個
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
</style>
</head>
<body>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
let newIndex =index; button.addEventListener('click', () => {
console.log('newIndex: ',popups[newIndex]);
popups[newIndex].classList.add("closePopup");
});
});
</script>
</body>
</html>
解決方案2
1 已采納 2019-06-04 07:01:42
const buttons = Array.prototype.slice.call(document.querySelectorAll('.button')); buttons.forEach((button) => { button.addEventListener('click', () => { button.parentElement.style.display ='none'; }); });
.popup { border: 3px solid gray; } .button { position: absolute; left: -15px; top: -15px; display: block; border: 1px solid #000; width: 30px; height: 30px; background-color: #fff; border-radius: 50%; text-align: center; line-height: 30px; } .content-wrapper { max-height: 50vh; overflow-y: auto; padding: 20px; } .content { overflow: hidden; } .popup { width: 300px; position: relative; position: fixed; right:30px; } .popup:nth-child(1) { bottom:30px; } .popup:nth-child(2) { bottom:130px; } .popup:nth-child(3) { bottom:230px; }
<div class="popup"> <span class="button">×</span> <div class="content-wrapper"> <div class="content"> No.1 </div> </div> </div> <div class="popup"> <span class="button">×</span> <div class="content-wrapper"> <div class="content"> No.2 </div> </div> </div> <div class="popup"> <span class="button">×</span> <div class="content-wrapper"> <div class="content"> No.3 </div> </div> </div>
使用JavaScript關閉多個彈出窗口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.