как сделать popup окно html
addons for Elementor: Piotnet, Essential, Premium, Happy, Ultimate , Jetelements
100 рублей
1000 рублей
Привет! Сегодня я покажу вам, как создать простое всплывающее POPUP HTML окно для вашего сайта, используя HTML, CSS и JavaScript.
Для начала, давайте добавим кнопку, с помощью которой будем открывать всплывающее окно. Для этого в HTML-коде создадим кнопку с ID openPopupBtn.
<button id="openPopupBtn">Открыть окно</button>
Теперь добавим сам контейнер всплывающего окна. Внутри него разместим блок с контентом и кнопку для закрытия окна. Окно будет скрыто по умолчанию с помощью класса popup.
<div id="popup" class="popup">
<div class="popup-content">
<span id="closePopupBtn" class="close-btn">×</span>
<p>Это всплывающее окно с контентом.</p>
</div>
</div>
Теперь давайте стилизуем наше POPUP HTML окно с помощью CSS. Сначала создадим стиль для кнопки открытия окна:
#openPopupBtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
Далее добавим стили для всплывающего окна. Оно должно быть зафиксировано по центру экрана с полупрозрачным фоном:
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
Внутри этого POPUP HTML окна будет располагаться контент. Ему мы зададим белый фон, отступы, округлые углы и позиционируем кнопку закрытия:
.popup-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
width: 300px;
position:relative;
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
}
Теперь, когда стили готовы, давайте добавим немного JavaScript, чтобы кнопки открытия и закрытия окна работали. Для этого используем два простых обработчика событий:
document.getElementById('openPopupBtn').addEventListener('click', function() {
document.getElementById('popup').style.display = 'flex';
});
document.getElementById('closePopupBtn').addEventListener('click', function() {
document.getElementById('popup').style.display = 'none';
});
Когда пользователь нажимает на кнопку «Открыть окно», всплывающее окно появляется по центру экрана. Чтобы закрыть POPUP HTML окно, пользователь нажимает на крестик, и окно скрывается.
На этом всё! Мы создали простое всплывающее окно для вашего сайта. Попробуйте сами добавить этот код на свою страницу и поэкспериментируйте с его настройками.