Если всплывающие окна на вашем сайте только раздражают его посетителей, это означает, что вы просто не умеете их делать. Как создать попап для сайта, который будет максимально удобен и полезен, читайте в этой пошаговой инструкции.
Далее мы расскажем, как эффективно создавать всплывающие окна на сайте, сравним разные подходы и дадим готовые примеры кода для самых популярных сценариев использования попапов.
А как можно эффективно использовать попапы для монетизации вашего сайта, вы узнаете в нашем Telegram-канале Partnerkin.
Существует несколько подходов к созданию попапов для сайта.
Тег <dialog> и связанный с ним JavaScript API в стандарте HTML5 стали доступны во всех современных браузерах в марте 2022 года, чтобы раз и навсегда решить проблему с созданием всплывающих окон на сайтах. Они значительно упрощают то, на что раньше уходили десятки строк кода.
Для <dialog> предусмотрено два режима работы:
Базовый HTML-код для создания попапа.
<dialog id="my-dialog">
<h2>Заголовок попапа</h2>
<p>Это содержимое вашего модального окна. Здесь может быть форма, текст или изображение.</p>
<!-- Форма с методом "dialog" — удобный способ закрытия -->
<form method="dialog">
<button>Закрыть</button>
</form>
</dialog>
В простейшем случае, чтобы попап открылся при загрузке страницы, не требуется даже JavaScript. Нужно просто прописать атрибут open в самом теге:
Ваш менеджер 
YouTube 
0
<dialog open>Я открылся!</dialog>
Для управления возможностями закрытия попапа можно использовать атрибут closedby у того же тега, например:
<dialog id="my-dialog" closedby="any">
Варианты значений, которые ему можно задать:
Прежде всего для нашего попапа прописывается следующая переменная, имя которой впоследствии будет использоваться для всех действий с этим окном.
const dialog = document.getElementById('my-dialog');
Встроенная кнопка закрытия попапа в вышеприведенном коде уже работает по умолчанию. Но если у вас есть другая кнопка, то пропишите еще и следующий код:
const closeButton = document.getElementById('close-dialog-btn');
Использование разных кнопок для закрытия всплывающего окна может быть особенно полезно в том случае, если повесить на них разные функции. Например, закрытие по умолчанию трактовать как отказ пользователя от предложения, изложенного в попапе, а клик на дополнительную кнопку — как согласие, с перенаправлением на страницу с этим предложением.
При использовании тега button в форме с методом dialog можно получить значение атрибута value той кнопки, которая была нажата пользователем, через функцию returnValue, и направить пользователя куда надо в соответствии с ним.
Открытие попапа. В нужном месте страницы вставьте следующий код JavaScript.
showButton.addEventListener('click', () => {
dialog.showModal();
});
Закрытие попапа по какому-либо событию. Можно не дожидаться, пока пользователь сам закроет попап, а убрать его с глаз долой в случае наступления какого-либо события. Просто добавьте в его обработчик строчку dialog.сlose();
Закрытие попапа по другой кнопке. Если вы создали отдельную кнопку для закрытия попапа, по примеру выше с closeButton, то для ее работоспособности нужно добавить код:
closeButton.addEventListener('click', () => {
dialog.close();
});
Закрытие по клику на самом попапе. По умолчанию окно, созданное тегом <dialog>, не закрывается по клику на его содержимом. Это стандартное поведение для модальных окон, но его можно исправить следующим кодом:
dialog.addEventListener('click', (event) => {
// Проверяем, был ли клик непосредственно по элементу <dialog>
// а не по его дочерним элементам
if (event.target === dialog) {
dialog.close();
}
});
Как внедрить эффективный попап?
Прежде всего определитесь, зачем он вообще вам нужен. Если просто для красоты или лишь бы как у всех, то лучше всего откажитесь от этой затеи. А если вы придумали для него практическую пользу, то дальше действуйте так.
К тегу <dialog> можно применять стили CSS, как и к любому другому элементу. Но у него есть ряд своих уникальных псевдоэлементов и псевдоклассов.
Пример кода CSS с приведением нашего попапа в более благородный вид.
#my-dialog {
width: 90%;
max-width: 500px;
border: 1px solid #ccc;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#my-dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
}
#my-dialog[open] {
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Результат применения для обычного окна будет выглядеть так. Чуть ниже покажем и модальное.
showButton.addEventListener('click', () => {
dialog.showModal();
document.body.style.overflow = 'hidden'; // Блокируем скролл
});
dialog.addEventListener('close', () => {
document.body.style.overflow = 'auto'; // Возвращаем скролл при закрытии
});
Теперь, когда у нас есть готовый компонент, настало время выбирать, как и когда его показывать. Делать это нужно уместно и аккуратно, ведь попап относится к одному из самых агрессивных форматов взаимодействия с посетителями сайтов.
Самый простой сценарий, когда пользователь сам инициирует такое действие. У элемента прописывается событие onClick с кодом открытия попапа, например:
<p onСlick="dialog.showModal();">Кликните по этому тексту, чтобы открыть попап</p>
После клика в любом месте внутри содержимого, ограниченного тегами <p></p>, всплывает наше окно, в данном случае — модальное, с размытием фона в соответствии с прописанными выше стилями CSS.
Показ всплывающего окна через N секунд после загрузки страницы. Такой сценарий часто используют, чтобы предложить пользователю лид-магнит, дав ему некоторое время на знакомство с контентом
addEventListener('load', () => {
() => {
// Убедимся, что другое модальное окно еще не открыто
if (!dialog.hasAttribute('open')) {
dialog.showModal();
document.body.style.overflow = 'hidden';
}
}, 5000); // Показать через 5 секунд
});
Показываем попап, когда пользователь пролистал до определенной части страницы.
let isPopupShown = false;
addEventListener('scroll', () => {
const scrollable = document.documentElement.scrollHeight - innerHeight;
const scrolled = scrollY;
// Если пользователь прокрутил 80% страницы и попап еще не был показан
if (scrolled / scrollable > 0.8 && !isPopupShown) {
dialog.showModal();
document.body.style.overflow = 'hidden';
isPopupShown = true; // Устанавливаем флаг, чтобы не показывать снова
}
});
Это более сложная техника, которая пытается поймать пользователя в тот момент, когда его курсор движется к верхней границе окна или к вкладкам браузера. Ее можно использовать для домонетизации пользователя, который не заинтересовался текущим предложением.
document.documentElement.addEventListener('mouseout', (e) => {
// e.clientY < 0 означает, что курсор вышел за пределы верхней границы окна
if (e.clientY < 0 && !isPopupShown) {
dialog.showModal();
document.body.style.overflow = 'hidden';
isPopupShown = true;
}
});
Когда лучше показывать посетителю попап?
Лучшее время для того, чтобы показать попап, зависит от того, какие задачи он призван решать. Если это предложение скидки, то попап должен всплывать сразу, как только пользователь попал на карточку соответствующего товара. Лучше, если он будет появляться где-нибудь сбоку, чтобы не сбивать пользователя с толку. Если попап нужен для сбора данных, то показывать его, наоборот, нужно с некоторой задержкой. Пусть посетитель сначала освоится на сайте, найдет, чем заинтересоваться, тогда он будет более расположен к тому, чтобы поделиться своими контактами.
Создание всплывающих окон для сайта стало значительно проще с появлением тега <dialog>. Он избавляет от необходимости писать сложный исходный код, позволяя сосредоточиться на контенте и сценариях показа попапов.
Используя <dialog> с внесением необходимых улучшений через JavaScript и CSS, вы сможете создавать попапы, которые помогают достигать ваших целей, не жертвуя при этом удобством и доступностью вашего сайта для посетителей.
![Лучшие 58 сайтов для поиска работы [2026]](/uploads/webp/articles/2639b07989b24fb434d1f5b5.webp)
