Этот вопрос проверяет навыки работы с DOM и создания интерактивных элементов на веб-странице.
Для создания простого модального окна на чистом JavaScript нужно скрыть окно по умолчанию и показывать его при определённом действии, например, нажатии кнопки. Для этого можно использовать стили CSS для отображения и скрытия, а JavaScript для добавления/удаления этих стилей при взаимодействии пользователя, например, нажатии на кнопку или иконку закрытия.
Модальное окно — это всплывающее окно, которое отображается поверх основного содержимого страницы и часто используется для отображения важной информации или получения ввода от пользователя. На чистом JavaScript это реализуется через манипуляции DOM и изменение стилей.
Пример простого модального окна:
<!-- HTML -->
<button id="openModal">Открыть модальное окно</button>
<div id="modal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close">×</span>
<p>Это модальное окно</p>
</div>
</div>
<!-- CSS -->
<style>
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.modal-content { position: relative; margin: 15% auto; padding: 20px; width: 80%; background-color: white; }
.close { position: absolute; top: 10px; right: 20px; cursor: pointer; font-size: 20px; }
</style>
<!-- JavaScript -->
<script>
const modal = document.getElementById('modal');
const openModal = document.getElementById('openModal');
const closeModal = document.getElementById('closeModal');
openModal.addEventListener('click', () => {
modal.style.display = 'block';
});
closeModal.addEventListener('click', () => {
modal.style.display = 'none';
});
window.addEventListener('click', (e) => {
if (e.target == modal) {
modal.style.display = 'none';
}
});
</script>Здесь модальное окно по умолчанию скрыто (display: none). При нажатии на кнопку открывается модальное окно, а при нажатии на крестик или вне окна — закрывается. Это простой способ реализации модального окна без использования библиотек.