Для закрытия модального окна в JavaScript существует несколько подходов.
1. Использование JavaScript API:
В зависимости от того, какой фреймворк или библиотеку вы используете для создания модального окна, у вас могут быть разные методы и события для его закрытия. Однако в большинстве случаев существует возможность для прямого закрытия модального окна путем вызова метода или изменения соответствующего свойства. Например, вы можете вызвать метод close у объекта модального окна или установить свойство display в значение "none", чтобы скрыть окно.
2. Использование события click:
Часто модальные окна закрываются при клике на кнопку "Закрыть" или на фон, вне модального окна. Для этого в HTML-разметке модального окна вы можете определить кнопку и/или область фона, и добавить к ним обработчик события click. Когда пользователь кликает на кнопку или фон, обработчик события вызывает функцию, которая закрывает модальное окно.
Например:
<div id="modal" class="modal">
<button id="closeBtn">Закрыть</button>
<!-- Содержимое модального окна -->
</div>
<script>
var modal = document.getElementById("modal");
var closeBtn = document.getElementById("closeBtn");
function closeModal() {
modal.style.display = "none";
}
closeBtn.addEventListener("click", closeModal);
modal.addEventListener("click", function(event) {
if (event.target === modal) {
closeModal();
}
});
</script>
В этом примере при клике на кнопку с id="closeBtn" или на область фона, модальное окно будет закрываться путем изменения свойства display на "none".
3. Использование клавиши Esc:
Еще один распространенный способ закрытия модального окна - это использование клавиши Escape (Esc). Для этого обычно необходимо добавить обработчик события keydown на весь документ. Когда пользователь нажимает клавишу Esc, обработчик события вызывает функцию закрытия модального окна.
Например:
<script>
var modal = document.getElementById("modal");
function closeModal() {
modal.style.display = "none";
}
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
closeModal();
}
});
</script>
В этом примере, когда пользователь нажимает клавишу Esc, модальное окно будет закрываться путем изменения свойства display на "none".
Надеюсь, эти примеры помогут вам закрыть модальное окно в JavaScript.