Модальное окно с плагином Modal Dialog
Опубликовано: 01.09.2018
Сегодня расскажу вам про очень интересный плагин — Modal Dialog, создающий модальное окно, которое автоматически появляться при переходе посетителя на странички вашего сайта, также есть функция закрытия данного модального окна через определенное время и другие интересные настройки.
Модальное окно (попап) на сайте без плагинов, своими руками. HTML + CSS + jQuery
Скачать исходники для статьи можно ниже
Данный плагин есть на wordpress.org:
Последнее обновление: 2012-11-22
Загрузок: 35,196 — пока скромненько.
Автор: Yannick Lefebvre
Сайт плагина: http://yannickcorner.nayanna.biz/wordpress-plugins/modal-dialog/
Установка стандартная — заходим в панель управления, в левом меню выбираем пункт «Плагины» и его подпункт «Добавить новый», в строку поиска вводим «Modal Dialog».
Устанавливаем и активируем плагин, после чего в левом меню вашей панели управления появиться новый пункт «Modal Dialog», который будет находится ниже пункта «Настройки» («Параметры»), данный пункт имеет 2 подпункта:
— Modal Dialog General Settings (Общие настройки). Здесь вы можете задать показывать или нет модальное окно в мобильных браузерах, а также указать количество модальных окон. Но в большинстве случаев данный подпункт оставляем по умолчанию и переходим сразу ко второму.
— Configurations (Конфигурации). Здесь остановимся по подробнее.
Пройдемся по основным параметрам:
«Активировать» (Activate) — можно отключить показ модального окна на сайте, поставив значение NO (по умолчанию YES)
«Содержимое источника» (Content Source) — здесь выбираем, что будет показываться в модельном окне: либо какой-нибудь сайт (его url указывается в параметре «Адрес веб-сайта» (Web Site Address)), либо остальное (параметр «Диалог Содержание» (Dialog Contents)).
«Внешний вид задержки (в миллисекундах)» (Appearance Delay (in milliseconds) по умолчанию стоит 2000, что равно 2 сек, то есть модальное окно будет появляться на вашем сайте через задержку в 2 сек после открытия посетителем странички вашего сайта.
«Диалог ширина» (Dialog Width) — ширина модального окна по умолчанию 500 px.
«Диалог высота» (Dialog Height) — высота модального окна по умолчанию 700 px.
«Наложение цветов» (Overlay Color) — это цвет затемнения фона на заднем плане при появлении модального окна, по умолчанию стоит какой-то болотный зеленый цвет, рекомендую поменять его, например на черный: #000000
«Количество дней до окончания работы куки» (Number of days until cookie expiration) — количество показав модального окна для посетителя записывается в cookies, то есть он определяет через какое количество дней будет вновь показано модальное окно для посетителя.
По умолчанию стоит 365 дней, если вы хотите показывать модальное окно раз в неделю, то поставьте цифру 7, раз в день — 1.
Также есть параметр «Количество раз для отображения модальных диалоговых» (Number of times to display modal dialog) — он задает количество показов модального окна за период жизни куки, то есть если у вас в параметре «Number of days until cookie expiration» стоит 7 дней, а в данном параметре 10, то за неделю модальное окно будет показано 10 раз, причем подряд при каждой просмотренной странички.
Сейчас непосредственно нужно разобраться, где мы хотим показывать наше модальное окно:
— если только на главной страничке, то находим параметр « Отображение на главной странице (Display on front page)» и ставим галочку
— если мы хотим показывать модальное окно еще и на других страничках, записях, то необходимо найти параметр « Только показать на конкретных страницах и одного сообщения (Only show on specific pages and single posts)» и поставить галочку, далее в параметре « Страниц и сообщений для отображения модальных диалоговых (Pages and posts to display Modal Dialog) » нужно указать id страничек или постов, которые хотите показывать.
Чтобы узнать id странички или записи нужно зайти в «Редактор» соответствующей записи и в адресной строке браузера найти id, например:
http://mnogoblog.zz.mu/wp-admin/post.php?post=12&action=edit
Ищем post=12, значит id=12.
Также можно настроить отображение модального окна после оставления комментария пользователем — достаточно интересная функция, например, предлагающая пользователю подписать на RSS-ленту вашего сайта.
Для этого есть параметре — « Отображение после нового комментарии, размещенном (Display after new comment posted) » — ставим галочку, если хотим воспользоваться данной функцией.
Все остальные параметры можно оставить по умолчанию.
Как сделать, чтобы модальное окно закрывалось автоматически через определенное время?
Для этого вам нужно поставить галочку в параметре «Auto-Close Диалог» (Auto-Close Dialog), что заставить окно закрываться.
Также вам нужно отрегулировать параметр «Auto-Close время (в мс) » Auto-Close Time (in ms)» — здесь также используются миллисикунды, по умолчанию стоит 5000 = 5 сек.
Перспективное применение модального окна.
С помощью данного плагина достаточно легко можно создать flash заставку вашего сайта, которая будет автоматически показываться посетителю при открытии главной странички сайта и через определенное время автоматически закрываться.
Flash страничку можно создать самому, но для этого нужно будет изучить достаточно много материала и потратить свое драгоценное время, а можно воспользоваться услугами студий Веб-дизайна, которые обеспечат вам создание красивой анимации или отдельной Flash странички, а если нужно и создание всего сайта на Flash. И чтобы все это не обошлось вам в слишком большую сумму, предлагаю воспользоваться вам специальным сервисом «Купонатор».
