Здравствуйте, делал модальное окно по гайду, вроде всё нормально, но окно не работает и класс не добавляется
*Js*
let btns = document.querySelectorAll('.modal--open');
let modal = document.querySelectorAll('.modal');
const body = document.body
function open(el) {
el.classList.add('active');
}
function close(el) {
el.target.closest('.modal').classList.remove('active')
}
btns.forEach(btn => {
btn.addEventListener('click', (e) => {
let data = e.target.dataset.modalOpen;
modal.forEach(modals => {
if(modals.dataset.modals == data || modals.dataset.modals == e.target.closest('modal-open').dataset.modalOpen) {
open(modals)
}
})
} )
modal.forEach(modals => {
modals.addEventListener('click', e => close(e))
})
})
Html
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="styles.scss">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>док</title>
</head>
<body>
<button class="modal--btn modal-open" data-open="modal-1">
Форма
</button>
<div class="modal" data-modal = 'modal-1'>
<div class="modal--bg">
<div class="modal-body">
<div class="modal--close">
Закрыть
</div>
<div class="modal--content modal--callback">
<div class="modal--form">
<form method="post" id = 'form' class="form">
<input type="text" name="name" placeholder="Имя">
<input type="tel" name="nom" placeholder="Номер">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
SCSS
.modal--btn{
border: none;
background-color: red;
color: white;
cursor: pointer;
}
body{
&.locked{
overflow: hidden;
}
}
.modal{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
visibility: hidden;
opacity: 0;
transition: all .2s;
pointer-events: none;
&.active{
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
.modal--bg{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
}
.modal-body{
background-color: #fff;
width: 300px;
height: 400px;
margin: auto;
max-height: 90%;
overflow: auto;
border-radius: 16px;
}
.modal--close{
margin-left: 20px;
cursor: pointer;
}
.modal--form{
margin-left: 60px;
margin-top: 20px;
}
Перепроверял, вроде всё нормально но класс добавляться не хочет, помогите пожалуйста
Поправка:
Класс добавляется, но ничего не происходит, потом не удаляется
Простой
