Свойство .style
элемента HTML показывает только встроенный стиль элемента. Это стили, добавленные к элементу непосредственно с <a style="display: block;" />
или с Javascript element.style.display = "block";
, поэтому проблема, с которой вы сталкиваетесь, заключается в том, что вы получаете undefined
при доступе к style.display
, поэтому ваш style.display === "block" or "none"
никогда не будет истинным. Как программист tip , первое, что нужно сделать с такой проблемой, это поместить console.log
в ваши функции openModal
и closeModal
, чтобы проверить, вызываются ли они, а также проверить,код работает так, как вы ожидаете. С console.log(model.style.display)
вы заметите это.
Чтобы получить вычисляемый стиль CSS, вы должны вызвать window.getComputedStyle(element);
( DOC здесь ), но это довольно много процессора и не очень хорошая практикана самом деле, когда у вас хороший CSS, лучший способ, который вы можете сделать, это принять начальное состояние (если нет состояния отображения, тогда предположите, что это none
), или использовать классы (что я рекомендую, исходя из моего опыта)Примерно так:
.modal {
display: none;
position: fixed;
&-content {
display: block;
&-close {
display: block;
}
}
&.shown { // Notice the shown class I added here
display: block;
}
}
Затем вы можете добавить или удалить класс .shown
к модалу, и он будет прятаться и показывать по вашему удобству:
const openModal = () => {
if(!modal.classList.contains("shown")) {
modal.classList.add("shown");
}
};
const closeModal = () => {
if(modal.classList.contains("shown")) {
modal.classList.remove("shown");
}
}
Кстати, add
и remove
уже выполнят contains
внутренне (более или менее), поэтому вам не нужно проверять это:
const openModal = () => {
modal.classList.add("shown");
};
const closeModal = () => {
modal.classList.remove("shown");
}
ПРИМЕЧАНИЕ. Лучше использовать классыдля вашего стиля вместо изменения встроенного стиля, потому что в будущем вы можете изменить стиль для отображения с анимацией (например) без необходимости что-либо менять из Javascript.