Модальное окно с плагином Modal Dialog

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

Скачать исходники для статьи можно ниже

Данный плагин есть на 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. И чтобы все это не обошлось вам в слишком большую сумму, предлагаю воспользоваться вам специальным сервисом «Купонатор».

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Модальное окно с плагином Modal Dialog: 1 комментарий

  1. Елена

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

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

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