使用 Vanilla Javascript 关闭多个弹出消息框

Question

我想知道如何使用 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;
}

Answer 1

试试这个

<!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>

Answer 2

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>

使用 Vanilla Javascript 关闭多个弹出消息框

Close Multiple Popup Message Boxes using Vanilla Javascript

javascript

popup

JavaScript

HTML

CSS