tgoop.com/webdevlair/3862
Create:
Last Update:
Last Update:
Создайте модальное окно, которое открывается при клике на кнопку и закрывается при клике на кнопку закрытия или на фон вокруг модального окна.
Ожидаемое поведение:• При клике на кнопку "Открыть модальное окно" появляется модальное окно.• Модальное окно закрывается при клике на кнопку "Закрыть" или на затемнённый фон.• Фон страницы не прокручивается, пока открыто модальное окно.
Решение задачи
<button id="openModal">Открыть модальное окно</button>
<div id="modal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close-button">×</span>
<p>Это модальное окно</p>
</div>
</div>
body.modal-open {
overflow: hidden;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
position: relative;
}
.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
const openModalBtn = document.getElementById('openModal');
const closeModalBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
const body = document.body;
openModalBtn.addEventListener('click', () => {
modal.style.display = 'flex';
body.classList.add('modal-open');
});
closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
function closeModal() {
modal.style.display = 'none';
body.classList.remove('modal-open');
}