- Модальное окно: что это и какая у него структура
- Виды всплывающих окон
- Преимущества поп-апов: где и зачем их использовать
- Недостатки поп-апов: когда они могут навредить
- Особенности создания модальных окон
- Как сделать всплывающее окно на HTML, CSS и JS
- Заключение
В этой статье поговорим о модальных окнах — эффективном инструменте для взаимодействия с пользователями через сайт.
Модальное окно: что это и какая у него структура
Модальное окно — это элемент интерфейса, который всплывает поверх основного контента страницы при ее открытии или наступлении определенных событий. Он блокирует доступ к контенту до того момента, пока пользователь не выполнит какое-либо действие — например, пока он не закроет его или не оставит свои контакты.
Часто такой элемент используют для рекламных сообщений, сбора контактной информации или оповещения пользователей о важных изменениях.
Структура модального окна:
- контейнер и фон элемента;
- «шапка» — заголовок и кнопка закрытия, или крестик;
- основной контент — текст, изображения, форма и другие элементы;
- «футер»/«подвал» — обычно содержит кнопки, ссылки или политику конфиденциальности.
Обязательным элементом является только крестик, но отсутствие заголовка считается плохой практикой.
Виды всплывающих окон
Поп-апы делятся на две категории:
- hello-board — может всплывать в любой части экрана и не блокировать основной контент;
- page-stop — обычно всплывает по центру и занимает значительное пространство экрана, блокирует основной контент.
Также есть несколько видов по условию показа:
- welcome/entry — возникает после того, как пользователь заходит на страницу;
- time-delayed — возникает после определенного времени, проведенного на странице;
- scroll-triggered — возникает после определенного процента просмотренного контента;
- click-triggered — возникает при нажатии на определенную кнопку/ссылку;
- exit intent — возникает, когда пользователь закрывает страницу.
Преимущества поп-апов: где и зачем их использовать
Поп-апы используются для выполнения конкретной задачи:
- Сбор контактной информации пользователей. Для этого поп-апы используются чаще всего. Пользователю предлагается подписаться на email-рассылку с определенным содержанием: выгодные предложения, полезный контент, оповещения и другое. Иногда могут собирать номера телефонов, тогда пользователю, например, предлагают заказать звонок.
- Способ донесения важной информации. Обычно на таких элементах пользователь получает различные сведения об изменениях: акциях, новых продуктах, способах доставки, часах работы и так далее. Это полезная для посетителя информация, которую он мог бы не узнать без объявления.
- Сбор обратной связи. В таких случаях всплывает небольшой опрос с целью оценки сервиса организации: доставки, работы менеджера или службы поддержки. Важно, чтобы опрос был компактным и простым.
- Способ удержания пользователей. Поп-ап может всплыть, когда посетитель закрывает сайт. Обычно на таких элементах содержатся предложения сохранить просмотренные товары, получить скидку или подарок.
В таких случаях именно использование поп-апов приводит к максимальной эффективности: пользователи не раздражаются, своевременно узнают о нововведениях, а конверсия увеличивается.
Недостатки поп-апов: когда они могут навредить
- В первую очередь они могут раздражать. Даже однократное появление таких элементов вызывает недовольство, поэтому не стоит создавать поп-апы, которые будут всплывать слишком часто без необходимости. Также у посетителя не должно возникать проблем с закрытием поп-апа: на некоторых страницах бывает так, что крестик незаметен или пользователь должен ждать 10–15 секунд до его появления, чтобы пользователь выполнил требуемое действие. После такого пользователь, скорее всего, просто закроет страницу.
- Отвлечение пользователей — поп-апы должны всплывать в подходящий момент и в целом соответствовать просматриваемой странице так, чтобы не рассеивать внимание пользователя.
- Технические недостатки. Большое количество всплывающих элементов может замедлить скорость загрузки страниц. Также если это форма для сбора информации, то лучше сразу настраивать валидацию. Это позволит не допустить как случайных, так и намеренных ошибок пользователей. Еще поп-апы могут некорректно отображаться на мобильных устройствах, поэтому стоит оптимизировать их под смартфоны, планшеты и другие гаджеты.
Важно не допускать наличия этих недостатков или хотя бы большей их части при создании поп-апов для конкретной страницы, ведь иначе пользователи могут просто покинуть ее из-за возникающих неудобств и негативных эмоций.
Итак, поп-апы вредят когда:
- некорректно всплывают на мобильном устройстве и их трудно закрыть;
- их очень много, и они не несут важной информации для пользователя;
- это длинная форма, на заполнение которой пользователь потратит много времени;
- они всплывают на страницах, куда пользователь зашел читать текст, просматривать фото/видео.
Особенности создания модальных окон
Чтобы рассказать обо всех нюансах создания модальных окон, можно писать отдельную статью. Частично они были затронуты в пунктах о преимуществах и недостатках, поэтому здесь представлены лишь некоторые дополнения.
В первую очередь следует сделать так, чтобы модальные окна отображались корректно в любом браузере (кросс-браузерность) и с любого устройства (адаптивность). Большая часть посетителей сайтов используют для просмотра мобильные устройства. Только так можно быть уверенным в том, что каждый пользователь увидит элемент и сможет взаимодействовать с ним.
Важно уделить внимание расположению баннера, его дизайну и соответствию стилю страницы. Вычурный, пестрый и чрезвычайно нагруженный дизайн не притянет к себе больше внимания, а наоборот, пользователь постарается скорее закрыть объявление. Лучше коротко и четко указать в заголовке, что вы предлагаете/спрашиваете у пользователя и при необходимости дать более конкретные разъяснения в тексте. Сделать выделяющуюся кнопку и разместить дополняющее изображение, если это нужно, использовать нейтральные цвета.
Крестик лучше располагать в верхнем правом углу, также будет уместно настроить закрытие по клику вне пределов pop-up.
Как сделать всплывающее окно на HTML, CSS и JS
Сделаем простой pop-up, который будет собирать email-адреса пользователей. Он будет содержать заголовок, крестик, поле для ввода электронной почты и кнопку «подписаться».
Для начала следует сделать разметку на HTML (здесь только тег <body>):
<body>
<!-- Если нужно, чтобы pop-up всплывал при нажатии (click-triggered) — создаем кнопку открытия -->
<button id="openModalButton">Подписаться</button>
<!-- Контейнер модального окна с заголовком, полем для ввода и кнопками -->
<div id="modal" class="modal">
<div class="modal-content">
<!-- Кнопка закрытия -->
<span class="close-button">×</span>
<h2>Подпишитесь на нашу новостную рассылку!</h2>
<form id="subscriptionForm">
<input type="email" id="email" name="email" placeholder="Введите ваш email" required>
<button type="submit">Подписаться</button>
<p class="error-message" id="errorMessage"></p>
</form>
</div>
</div>
<!-- Подключение JavaScript-файла -->
<script src="script.js"></script>
</body>Далее нужно задать стили с помощью CSS:
/* Общие стили, центровка */
body {
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
/* Стили для кнопки открытия, затемнение при наведении */
#openModalButton {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#openModalButton:hover {
background-color: #0056b3;
}
/* Основные стили для pop-up */
.modal {
/* Скрыто по умолчанию */
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #E6E6FA;
}
/* Скругление контейнера, добавление тени */
.modal-content {
position: relative;
background-color: #fff;
margin: 15% auto;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 6px #1E90FF;
animation: modalopen 0.5s;
}
/* Стили для крестика, затемнение при наведении курсора */
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: #888;
}
.close-button:hover {
color: #333;
}
h2 {
margin-top: 0;
font-weight: 700;
color: #333;
}
.modal-body form {
display: flex;
flex-direction: column;
}
/* Стили для поля ввода */
.modal-body input {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.modal-body input:focus {
border-color: #007bff;
outline: none;
}
/* Стили для кнопки подписки, изменение цвета при наведении */
.modal-body button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.modal-body button:hover {
background-color: #0056b3;
}
/* По умолчанию сообщение об ошибке скрыто */
.error-message {
color: red;
display: none;
}
/* Стили для придания адаптивности */
@media (max-width: 600px) {
.modal-content {
width: 95%;
}
}
/* Ключевые кадры анимации */
@keyframes modalopen {
from { opacity: 0; }
to { opacity: 1; }
}Финальный шаг — написание кода на JavaScript:
// Получаем доступ к элементам и записываем их в переменные
const modal = document.getElementById('modal');
const openModalButton = document.getElementById('openModalButton');
const closeModalButton = document.querySelector('.close-button');
const subscriptionForm = document.getElementById('subscriptionForm');
const errorMessage = document.getElementById('errorMessage');
// Функция для открытия
openModalButton.onclick = function() {
modal.style.display = 'block';
};
// Функция для закрытия
closeModalButton.onclick = function() {
modal.style.display = 'none';
};
// Функция для закрытия при клике вне области pop-up (если это нужно)
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
};
// Обработчик отправки формы
// Предотвращаем стандартное поведение формы
subscriptionForm.onsubmit = function(event) {
event.preventDefault();
const email = document.getElementById('email').value;
// Определяем поведение при пройденной и непройденной валидации
if (validateEmail(email)) {
modal.style.display = 'none';
showSuccessMessage('Вы подписались на рассылку!');
} else {
errorMessage.textContent = 'Пожалуйста, введите корректный email-адрес.';
errorMessage.style.display = 'block';
}
};
// Функция для валидации email
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
// Функция для показа сообщения об успешной отправке email
function showSuccessMessage(message) {
const successMessage = document.createElement('div');
successMessage.textContent = message;
successMessage.style.position = 'fixed';
successMessage.style.bottom = '20px';
successMessage.style.right = '20px';
successMessage.style.padding = '10px';
successMessage.style.backgroundColor = '#28a745';
successMessage.style.color = 'white';
successMessage.style.borderRadius = '5px';
successMessage.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
document.body.appendChild(successMessage);
// Установка длительности показа сообщения
setTimeout(() => {
successMessage.remove();
}, 3000);
}Заключение
Модальные окна — это действенный инструмент для выполнения многих задач: оповещения клиентов, продвижения товаров и акций, сбора контактов пользователей и их мнения о деятельности компании.
При этом они требуют к себе должного внимания на каждом этапе создания: от постановки целей до программирования и внедрения на сайт. Вместе с положительными сторонами они имеют и серьезные недостатки, которых можно избежать, если учитывать основные требования: не делать слишком много баннеров, делать их полезными и понятными для пользователя, учитывать то, что сайт посещают с разных устройств и браузеров.