Закрыть несколько всплывающих окон сообщений с помощью Vanilla Javascript - PullRequest
Новая
       3

Закрыть несколько всплывающих окон сообщений с помощью Vanilla Javascript

1 голос
/ 04 июня 2019

Я хотел бы знать, как закрыть несколько всплывающих окон, нажимая кнопки закрытия с помощью 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 голос
/ 04 июня 2019 

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>
1 голос
/ 04 июня 2019

Попробуйте это 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...