Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Почему модальное окно не открывается?

user user229000 Ученик (14), на голосовании 1 год назад
Здравствуйте, написал функцию которая добавляет класс _active к классу modal, сам класс тоже прописал, класс добавляется а модальное окно не открывается.

Html
  






Document










SCSS
 .modal__btn{ 
border: none;
background-color: red;
color: #fff;
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{
visibility: visible;
pointer-events: all;
}
}

.modal-bg{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
display: flex;
}

.modal-body{
background-color: #fff;
width: 700px;
margin: auto;
height: 400px;
max-height: 90%;
overflow: auto;
border-radius: 16px;
}
.modal-close{
margin-left: 30px;
cursor: pointer;
}
.modal-content{
display: flex;
align-items: center;
flex-direction: column;
}
Js
 let btns = document.querySelectorAll('._modal-open'); 
let modals = document.querySelectorAll('._modal');


function openModal(el) {
el.classList.add('_active')
};

btns.forEach(btn => {
btn.addEventListener('click', (e) => {
let data = e.target.dataset.modalOpen;
modals.forEach(modal => {
if(modal.dataset.modal == data || modal.dataset.modal == e.target.closest('._modal-open').dataset.modalOpen) {
openModal(modal)
}
})
})
})
Голосование за лучший ответ
Яков Гото Искусственный Интеллект (320972) 1 год назад
А ты opacity: 1 устанавливать не пробовал? У тебя элемент появляется, но будет невидим.
user user229000Ученик (14) 1 год назад
Он был там сначала, потом я его убрал подумав на него, теперь опять поставил, не получилось
user user229000Ученик (14) 1 год назад
Вообще было много ситуаций когда плагины не срабатывали по неведомой причине когда по идее должны работать, вот и сейчас та же ситуация
Похожие вопросы