[HTML] Всплывающие окна на сайте

Иногда на сайте надо показать информацию во всплывающем окне при первом посещении. Это можно использовать для предупреждения о возрасте или ненормативной лексики. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта.

Чтобы это сделать мы будем использовать jQuery и некоторые плагины к нему. Для показа всплывающих окон мы воспользуемся плагином arcticModal. Этот плагин позволяет изменять внешний вид всплывающих окошек.

Чтобы окно показывалось только один раз, мы будем записывать информацию в куки. Для работы с куками будем использовать плагин Cookie.

Подключаем необходимые файлы

Для начала надо подключить jQuery, если он ещё не подключен.Используем CDN Яндекса (можно использовать Google, кому какой большое нравится). Вставляем данный код между тегами <head></head>:

Далее надо скачать плагин arcticModal с официального сайта тут и подключаем его вписывая код после кода jQuere:
Стандартные темы окошек можно посмотреть на официальном сайте. Нам же остается дописать ниже код темы:
Далее подключаем плагин Cookie (будем подключать тоже с Яндекса):

HTML

Теперь надо составить код всплывающего окна:

В коде используется класс arcticmodal-close. При клике на элемент с таким классом окно будет закрываться.

Код JS

А теперь надо написать скрипт, который будет делать всю работу:

Параметр closeOnOverlayClick при вызове arcticModal определяет, будет ли закрываться окно при клике на оверлее (слою, который перекрывает сайт), а параметр closeOnEsc — действие при нажатие кнопки Esc.

Параметр expires при сохранении записи в куках задаёт время хранения куки в днях. Мы выбрали 30 дней, т. е. в течение месяца после посещения сайта не будет показываться окно. При каждом посещении кука обновляется.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.