Добавьте базовую структуру HTML и CSS
Для начала создайте основное окно с кнопкой, которая вызывает popup. Используйте HTML-элементы <button> и <div> для скрываемого окна. В CSS задайте стили для позиционирования, размеров и начальной скрытости popup с помощью display: none;.
Пример структуры
<button id="openPopup">Показать окно</button> <div id="popup" class="popup"> <div class="popup-content"> <button id="closePopup">Закрыть</button> <p>Это ваше всплывающее окно</p> </div> </div>
Добавьте JavaScript для управления показом
Вызывайте функцию отображения при клике на кнопку. Используйте addEventListener, чтобы отслеживать события. В функции меняйте свойство display на block или none для открытия и закрытия окна.
Пример скрипта
Добавьте плавный эффект появления и исчезновения
Соедините CSS и JavaScript для создания анимации изменения прозрачности. В CSS задайте transition для свойства opacity. Убирайте display: none;, а управлять видимостью можно через изменение opacity.
Обновленный CSS
.popup {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.popup.show {
opacity: 1;
pointer-events: auto;
}
Обновленный JavaScript
Обеспечьте удобство использования
Добавьте обработку закрытия окна при клике вне содержимого или при нажатии клавиши Escape. Для этого слушайте события click на фоне и keydown на документе.
