Как сделать чтобы модальное окно открывалось один раз

Добавил пользователь Дмитрий К.
Обновлено: 18.09.2024

В сегодняшнем уроке мы рассмотрим создание всплывающего окна на сайте с запуском через определенный промежуток времени. Эта потребность может возникнуть, например, при необходимости попросить email-адрес посетителя, предложить какую-нибудь скидку или порекомендовать к прочтению похожую по теме статью.
Вы наверняка видели на многих сайтах подобные поп-апы, и уже готовы сделать нечто подобное для вашего сайта.

Подготовительные работы

Для начала создадим базовый документ, где подключим плагин Colorbox, который отвечает за создание модальных окон на jQuery.

Показываем модальное окно

Обычно нам нужно к любому объекту HTML подвязать Colorbox с определенными параметрами:

Но в нашем случае мы не будем показывать модальное окно на сайте после взаимодействия с каким-либо объектом, а откроем его по прошествию определенного времени. Поэтому наш синтаксис будет следующим:

У Colorbox есть масса параметров и опций, с помощью которых можно очень гибко настроить отображение модального окна. Для нашего примера мы указали заголовок, задали размеры нашего окна и присвоили класс, по которому в CSS зададим оформление.

Теперь нам нужно задать время в миллисекундах, после которого наше модальное окно увидит посетитель. Для этого используем стандартную функцию JavaScript setTimeout

Теперь всплывающее окно на сайте появится через 10 секунд проведенных на странице, где установлен данный скрипт.

Фокусировка

Окно у нас есть, и чаще всего внутри будет призыв к действию. Например, вы попросите посетителя оставить свой email. Следственно в модальном окне у вас будет поле для ввода . Теперь можно упростить задачу посетителю: мы поместим курсор сразу в поле ввода.

Возврат фокуса

Наше модальное окно будет когда-то закрыто (по кнопке закрытия или после заполнения формы) и хорошо бы вернуть курсор пользователя в то место, где он был до момента появления всплывающего окна.
Для этого мы немного изменим наш код, и будем запоминать место в документе, где был пользователь до открытия поп-апа:

Как показывать всплывающее окно на сайте не чаще раза в час

Для показа модального окна раз в сутки код будет следующим:

Ниже вы видите то, что у нас получилось.
Через 10 секунд всплывает модальное окно с призывом. И это окошко показывается пользователю раз в сутки.
Также мы добавили кнопку с очисткой кук, чтобы вы могли несколько раз посмотреть на работу демо.

Верстка модального окна

Обычно нужно не только само окно, но и затемняющий фон под ним. Верстать можно как вверху, так и внизу тега

В этой статье мы разберемся как создавать модальные окна с помощью javascript.

Модальные окна которые мы сделаем буду универсальны. Для создания модальных окон в дальнейшем вам не нужно будет дописывать что-то в .js файле.

Вот что получилось в итоге ( это скрин, не кликать :)):

План работы скрипта:

Зарегистрировать событие клика на элементы с классом js-open-modal
При клике на кнопку, ищем модальное окно с таким же атрибутом data-modal, добавляем класс .active подложке и этому модальному окну
При клике на крестик удаляем класс у родительского модального окна и подложки

Пишем JavaScript

В начале, повесим на document событие DOMContentLoaded. Это событие сработает когда страница будет загружена.

Затем запишем массив кнопок в переменную используя метод querySelector. Здесь же определим еще 2 переменные: элемент подложки и массив кнопок-крестиков.

Заметьте, modalButtons и CloseButtons мы получаем через querySelectorAll, который возвращает массив, мы сделали это потому что нужно обрабатывать клики по всем кнопка, а вот overlay мы получаем через querySelector, он возвращает один элемент.

В html добавим кнопкам классы .js-open-modal. Мы специально будем использовать новый класс с приставкой js, чтобы не путать стили и интерактивность. Все кто будет работать с кодом увидит, что у класса есть приставка js, значит этот класс используется для интерактивности и его лучше не трогать.

После этого нужно повесить событие клика на каждую кнопку. Для этого мы переберем полученный массив кнопок и повесим обработчик на каждый элемент. Перебирать массив мы будем с помощью forEach:

В переменной item у нас будет храниться текущий элемент цикла. Повесим обработчик на него:

event или e — объект текущего события. В этом объекте хранятся различные методы и данные. При вызове любого события указание аргумента у функции будет ссылаться на этот объект. Зачем нам нужен этот объект? Об этом чуть ниже.

Что нам нужно сделать теперь?

Для начала нужно предусмотреть то, что кнопка, которая вызывает наше модальное окно, может быть ссылкой, кнопкой в форме или другим элементом, который стандартно выполняет какие-то интерактивные действия. Нам нужно отменить эти действия для нормальной работы нашего кода.

Для этого в объекте события есть метод, который предотвращает стандартное действие элемента.

С предотвращением вопрос решили.

У каждой кнопки есть атрибут data-modal, в нем хранится значение, которое находится у модального окна в таком же атрибуте. Наши действия:

Получить значение атрибута текущей кнопки
Найти модальное окно с помощью этого значения

Для того чтобы найти модальное окно, мы пишем определенный селектор, а там где нужно вставить значение, делаем разрыв строки и вставляем значение переменной, соединяя строки используя оператор сложения, в случае со строками, он выполняет их соединение ( конкатенацию).

В итоге получается такой селектор — ‘.modal=[data-modal="значение переменной"]’ , который и находит наше модальное окно.

Давайте добавим нашему окну и подложке класс active.

Напишем стили для классов .active:

Весь javascript код который получился:

Кнопки должны открывать то модальное окно, к которому привязаны. Проверяем:

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

При клике на крестик нам нужно у этого же элемента найти родителя или деда с классом .modal и удалить у него класс .active.

Готовой функции для перебора родителей элемента нет. Есть метод который позволяет получить родителя, но это ненадежно, так как разметка может поменяться и наш код сломается.

Для таких задач я не буду писать велосипед, а воспользуюсь готовой микро-библиотекой closest. Код библиотеки:

Его нужно подключить в отдельном файле или в этом же файле до нашего кода.

Библиотека создает функцию closest. Используя её мы можем искать элемент, который находится выше по дереву и класс которого совпадает с тем который мы ищем.

В нашем случае мы должны найти родителя с классом .modal и не важно является ли он прямым предком или между них есть еще какие-то элементы.

От нашего крестика мы идем вверх и проверяем родителя на класс .modal, не подошел — берем родителя его родителя и опять проверяем, так до самого конца, до window, пока не найдем интересующий нас элемент. В библиотеке jquery такая функция есть изначально, пишется она так же.

При клике на крестик, код выполнился и мы увидели в консоли родителя или деда нашего крестика, элемент с классом.modal. Теперь мы можем убрать у него активный класс, сразу же уберем его и у подложки.

Теперь вы можете создавать много много модальных окон не изменяя свой js код.

Спасибо за прочтение статьи! Если материал был полезен для тебя — поставь лайк или напиши об этом в комментариях, это займет 1 минуту, это важно для меня. Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Дополнение

По просьбе читателя добавляю код для закрытия модального окна по кнопке ESC и при клике на темный фон.

Закрытие окна при клике на ESC:

Здесь мы создали событие нажатия на поднятия клавиш. В документе будут проверяться любые клавиши, нажатые пользователем. В функции мы указываем параметр, который отвечает за событие нажатия.

У событий связанных с клавишами, есть свойство keycode, которое хранит код нажатой клавиши. У ESC этот код — 27.

Нам остается проверять при каждом нажатии код клавиши с кодом ESC и если есть совпадение — удаляем класс у активного окна и фона.

Скрытие при нажатии

Ну тут вы уже сами должны уметь. Не читайте дальше и попробуйте сами подумать и написать этот код. Я сделать пару отступов, чтобы вы не подглядывали.

Ладно, подглядывай уже 🙂

Создаем событие клика на overlay, эта переменная создана в самом начале. Потом в функции удаляем у активного модального окна активный класс и делаем тоже самое у фона, на который кликнули, за это отвечает переменная this, если переводить — этот.

9 простых правил, которые помогут вам создать более удачный дизайн модальных окон

Jul 12, 2021 · 5 min read

Модальное окно — это такое окошко, которое появляется поверх родительского экрана. Его называют модальным, потому что оно вызывает состояние, при котором главная страница уходит на второй план, но все еще остается в поле зрения. Пользователю предлагается выполнить какое-либо действие, чтобы вернуться к основному окну.

Дизайнеры используют такой формат, чтобы привлечь внимание пользователей. Информация и интерактивные действия в модальном окне должны занимать все внимание. В этой статье мы рассмотрим несколько простых правил о том, как лучше создавать такие окна.

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

Модальное окно в формате “Загрузка…” является довольно распространённой практикой для уведомления о длительных операциях. Использование модальных окон в таких случаях можно считать логичным, поскольку такое окно не позволяет пользователю взаимодействовать с экраном. Однако можно найти и более подходящее решение — добавление на сайт строки загрузки прямо в кнопку, которая начинает действие. Такое решение будет сигнализировать о том, что нужно немного подождать, и не дает пользователю снова нажать на кнопку загрузки.

Уведомление об успешном выполнении всегда лучше выводить либо прямо внутри интерфейса, либо на отдельной странице.

Примечание: модальные окна можно использовать в том случае, если пользователю необходимо совершить действие, которое может иметь серьезные последствия или которое трудно или невозможно отменить.

2. Осторожнее с модальными окнами, вызываемыми системой

Есть два типа модальных окон: вызываемые пользователем и вызываемые системой:

Те, что вызваны пользователем, появляются на экране лишь тогда, когда человек сам этого хочет (например, нажимает на кнопку). В этом случае пользователь понимает, почему появляется окно.
Те окна, вызываемые системой, которые лишь прерывают задачу, выполняемую человеком. Одна из самых больших проблем с таким типом модальности заключается в том, что эти окна отвлекают пользователей от того, что они делали до появления окна. Человек может даже не понять, почему оно всплыло.

Дизайнеры обычно используют такие окна в рекламных целях. Такие окна прерывают пользователя и заставляют его выполнить какое-либо определенное действие. “Незваные” окна часто производят плохое впечатление на пользователей — люди инстинктивно ищут кнопку “закрыть”. Такие окна считаются раздражающими и неуместными.

3. Убедитесь, что пользователи понимают, что от них требуется

Сопоставление текста кнопки с заголовком страницы поможет понять ее контекст. Рекомендуется использовать очевидные места для кнопки, где точно будет видно, что произойдет, когда пользователь нажмет на нее.

К примеру, если пользователь хочет удалить свои файлы, то вместо того, чтобы спрашивать “Очистить хранилище?” с ответами “Да” или “Нет”, лучше спросить “Вы точно хотите удалить свои файлы?” с вариантами “Удалить” и “Отмена”.

4. Выносите содержимое сайта и его активные кнопки в модальные окна

Старайтесь избегать ситуаций, когда в модальном окне требуется скроллить контент. Скроллинг пригоден для длинных страниц, а модальные окна предназначены лишь для короткой, действительно важной информации или действий. Поэтому если вы чувствуете, что в модальном окне содержится слишком много информации, то лучше пересмотреть, что действительно стоит включить в него. В таких случаях лучше просто разместить информацию прямо на сайте.

В идеале, модальное окно должно содержать пару-тройку предложений, а также не более двух кнопок действия.
Третье действие, например кнопка “Узнать больше”, лишь уводит пользователя от основного окна и не дает ему завершить желаемое действие.

5. Делайте кнопки закрытия окна видимыми

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

Добавить заметную кнопку “Закрыть” или “×” в правом верхнем углу окна.
Добавить заметную кнопку “Закрыть” или “Отменить” в нижней части окна.
Добавить возможность закрытия модального окна при клике за его пределами.

Размер модального окна не должен быть чересчур большим, оно не должно занимать все пространство — в идеале не более 25% площади экрана. Если у вас не получается вместить все, что вы хотите, в модальное окно, то в таком случае будет лучше создать под эту информацию отдельную страницу.

7. Выделяйте модальные окна

Вот как можно дать пользователям понять, что перед ними модальное окно:

Поместите модальное окно прямо в поле зрения пользователя. Если модальное окно появляется за пределами экрана, то человеку придется скроллить, чтобы его найти, а это является плохой практикой. Проблема в том, что пользователь может не понять, что нужно скроллить куда-то по странице, это может привести к путанице.
Убедитесь, что модальное окно визуально отличается от фоновой страницы. Затемнение фона окна поможет пользователям понять, что оно расположено поверх основного сайта.

8. Сделайте содержимое модального окна доступным для пользователей с клавиатурой (для ПК)

Как только на странице открывается модальное окно, фокус страницы должен быть переведен на него. Пользователь должен иметь возможность перемещаться по функциональным элементам управления в окне с помощью клавиатуры.

Сделайте так, чтобы пользователь мог закрыть окно по нажатию Esc. Когда пользователи случайно открывают модальное окно, многие из них инстинктивно нажимают клавишу Esc, чтобы вернуться на предыдущую страницу.

9. Не используйте вложенные модальные окна

Никогда не создавайте модальные окна, которые могут вызывать новые модальные окна. Такой подход создает визуальный бардак в дизайне сайта.

Читайте также: