Как создать pop up на сайте своими руками легко и быстро

Добавьте на сайт всплывающее окно, чтобы привлечь внимание посетителей к акции, новости или подписке. Для этого потребуется всего несколько строк кода и базовые знания HTML и javascript.

Шаг 1: подготовьте HTML-разметку

Создайте элемент, который будет отображаться в виде окна. Например,:

<div id="popup" style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%); background:#fff; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); z-index:1000;">
<h3>Подписка на новости</h3>
<p>Введите ваш email, чтобы получать обновления.</p>
<input type="email" placeholder="Ваш email">
<button onclick="closePopup()">Закрыть</button>
</div>

Этот блок по умолчанию скрыт (display:none) и появляется по желанию с помощью скрипта.

Шаг 2: добавьте CSS-стиль для плавности появления

Можно реализовать простую анимацию появления, добавив transition к стилям. Например,:

<style>
#popup {
transition: opacity 0.3s ease;
opacity:0;
}
#popup.show {
display:block;
opacity:1;
}
</style>

Шаг 3: напишите скрипт для отображения и закрытия окна

Добавьте эти функции прямо перед закрывающим тегом </body> или в отдельный скрипт:

function showPopup() {
const popup = document.getElementById('popup');
popup.style.display = 'block';
setTimeout(() => popup.classList.add('show'), 10);
}
function closePopup() {
const popup = document.getElementById('popup');
popup.classList.remove('show');
setTimeout(() => {
popup.style.display = 'none';
}, 300);
}

Используйте таймер или событие, чтобы проявить окно автоматически. Например, вызовите showPopup() через 5 секунд после загрузки страницы так:

window.onload = () => {
setTimeout(showPopup, 5000);
};

Дополнительные советы

• Ограничьте показ: чтобы окно не показывалось постоянно, добавьте проверку в localStorage:

if (!localStorage.getItem('popupShown')) {
setTimeout(() => {
showPopup();
localStorage.setItem('popupShown', 'true');
}, 5000);
}

• Добавьте закрытие по клику вне окна: для этого можно слушать событие клика и скрывать окно при совпадении:

document.addEventListener('click', (e) => {
const popup = document.getElementById('popup');
if (popup.style.display === 'block' && !popup.contains(e.target)) {
closePopup();
}
});

Создание popup занимает всего несколько минут, и эти шаги помогут реализовать его без сторонних библиотек.