Модальные окна для любого контента


www.workzilla.ru

Модальные окна часто используются веб-разработчиками для привлечения внимания пользователей. Такое окно расположено внутри текущего, поверх всего контента, контент под ним становится темнее, тем самым выделяется  модальное окно. Модальные окна на WordPress  можно создать при помощи плагина Sugar Modal Windows Plugin. Созданные плагином модальные окна могут содержать любую информацию, в том числе текст, аудио, видео, короткие коды так же в него можно встроить различные формы, например форма обратной связи, созданная плагином cforms.

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

Скачать плагин Sugar Modal Windows Plugin  или Sugar Modal Windows Plugin 

Из скаченного архива Вам понадобиться папка «sugar-modal-windows» ее необходимо загрузить через Ftp клиент на Ваш сервер в папку /Ваш сайт /wp-content/plugins

В панели администратора во вкладке плагины активизируйте его, тогда в боковой панели появиться вкладка «Modals» — настройки модального окна.

Создайте новое модальное окно

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

Настройки прозрачности и цветовой палитры окон

Настройки модального окна

После того ка Вы настроили необходимые параметры опубликуйте страницу. Откройте запись или страницу где Вы хотите поместить кнопку или ссылку на модальное окно. В визуальном редакторе появиться кнопка.

Link Text: Название кнопки или ссылки

Choose Modal: выбор модального окна

Style: Button – кнопка, Plain Text – ссылка

Button Size (Размер кнопки): Large — большая, Default- по умолчанию, Small- маленькая.

Button Color (Цвет кнопки): На выбор 7 цветов, Default-серый.

Полученный код разместите в нужном месте.

Примеры работы модальных окон.

Важно:

Если у пользователя отключен JavaScript, то плагин работать не будет.

При создании модального окно название ему необходимо давать на английском языке или цифрами, иначе содержимое модального окна не будет отображаться. Чтобы при появлении модального окна не появлялась название, в «Настойки модального окна» поставьте галочку «отключить заголовок».

Похожие записи

24 комментария на “Модальные окна для любого контента”

  • Очень полезная статья. Некоторые моменты думаю использовать в своих проектах. Спасибо.

  • А как на счет раздражения посетителей? Многие твердят, что такой способ раздражает посетителей.

    • Женя:

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

  • Анатолий Солодкий:

    Хотел протестировать этот плагин, но не получается скачать!!!

  • Отличный плагин! Но есть маленькое «но» — встретился баг — если плагин активен, то редактор записей и страниц не переключается между вкладками «текст» и «визуально» + еще в самой панели редактора пара кнопок не работают.

    Кто-то встречался с такой проблемой? Может решения какие подскажите?

    версия WP — 3.5

  • Евгений:

    При установке перестало работать переключение между текстовым и визуальным редакторами

    • Женя:

      Здравствуйте Евгений и Юрий, изменены ссылки для скачивания, в обновленной версии исправлен данный баг.

  • Иван:

    Добрый день!

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

    яваскрипт должен быть включен в браузере?

    • Женя:

      Здравствуйте Иван Java Script должен быть включен в браузере иначе плагин не работает.

  • Александр:

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

    • Женя:

      Здравствуйте Александр. Создайте нужную кнопку в записи, опубликуйте ее, откройте исходный код страницы и найдите код кнопки, начинается он

      <p> <style type="text/css"> . . . . . . . </style> <script type="text/javascript"> . . . . . . </script> . . . . . . </p>

      Скопируйте его и вставьте в нужное место в шаблоне, заключи этот код в<div id="mw"></div> ,а в файле style.css пропишите нужные стили. Запись потом можно удалить.

  • Максим:

    Добрый день! А как можно дать этому окну функцию открываться при нажатии на пункт меню Авторизация?

    • Женя:

      Добрый день Максим! В пункт меню кнопку можно добавить следующим образом:

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

       
      		<p>
      	<style type="text/css">
      		.modalWindow-3 { background: #adadad; padding: 8px; width: 600px; }
      		.modalWindow-3 .modalWindow-title { background: #cccccc; color: #666666; }
      		.modalWindow-3 .modalWindow-content { background: #fff; color: #333; }
      		.modalWindow-3,
      		.modalWindow-3 .modalWindow-boxInner {
       
      			-webkit-border-radius: 8px;
      			-moz-border-radius: 8px;
      			border-radius: 8px;
      		}
      		.modalWindow-3 .modalWindow-title {
      			-webkit-border-radius: 8px 8px 0 0;
      			-moz-border-radius: 8px 8px 0 0;
      			border-radius: 8px 8px 0 0;
      		}
      		.modalWindow-3 .modalWindow-content {
      			height: 400px; overflow-y: scroll;
      			-webkit-border-radius: 0 0 8px 8px;
      			-moz-border-radius: 0 0 8px 8px;
      			border-radius: 0 0 8px 8px;
      		}
      	</style>
      	<script type="text/javascript">
      		//<![CDATA[
      			jQuery(function($){
       
      				$("#3-modal").modalWindow({
       
      					position:	"fixed",
      					width:		600,
      					trans:		0.9,
      					opacity:	0.8,
      					close:		true,
      					speed:		600,
      					className:		"modalWindow-3",
      					borderWidth: 8
       
      				});
      			}); // end jquery(function($))
      		//]]> 
      	</script><div id="3" class="modalWindow-container"><h3 class="modalWindow-title">3</h3><div class="modalWindow-content">
      <div class="modal-inner"><p>Форма авторизации</p>
      </div></div></div><a id="3-modal" href="#3" rel="nofollow">
      <div class="modal-button button-size-default button-color-green"><span>Авторизация</span></div></a></p>

      Так же в исходном коде посмотрите, как задаются страницы меню

      У меня так —

      <li class="page_item page-item-4"><span><span>Карта сайта</span></span></li>

      Теперь откройте файл header.php вашей темы и найдите блок отвечающий за вывод меню

      У меня он выглядит так:

         <div class="nav">
          <ul class="artmenu">
              <?php art_menu_items(); ?>
                    </ul>

      Перед закрывающим тегом </ul>надо вставить код странице, а затем код кнопки.

      Cсылку

       

      меняем на ссылку из кнопки

      <a id="3-modal" href="#3"  rel="nofollow">

      page-item-4 удалить, а так же удаляем ссылку из кода кнопки

      <a id="3-modal" href="#3"  rel="nofollow"><div class="modal-button button-size-default button-color-green"><span>Авторизация</span></div>

      Меняем якорь ссылки «Карта сайта» на «Авторизация» и сохраняем файл.

      Все ссылки без rel="nofollow"

  • Максим:

    Добрый день!

    Я вставляю в текст модуля код cforms, но при ошибках в заполнении или успешном отправлении нет соответствующего уведомления, модуль закрывается, и только если открыть снова, то появляются предупреждения красным текстом о неправильном заполнении, как доработать?

    • Женя:

      Здравствуйте Максим уберите галочку «включить Ajax» в настройках формы.

  • Андрей:

    Добрый вечер!

    У меня аналогичная проблема. О какой галочке идет речь ?

    Не могу её найти...

    • Женя:

      «Уберите галочку «включить Ajax» в настройках формы»- относиться к cforms

      убрать галочку

  • Андрей:

    Спасибо за оперативный ответ, но я пользуюсь Contact Form 7, а там вроде такой настройки нет. Как быть, есть ли выход ?

    • Женя:

      Отключить AJAX для Contact Form 7

      Для этого нужно добавить строчку в файл wp-config.php:

      define( 'WPCF7_LOAD_JS', false )

      Будет ли работать не знаю, позже протестирую.

  • Андрей:

    Неа, не работает! Заметил, что когда в настройках плагина Modal Window ставишь авто открытие модального окна, тогда все работает как надо. Но к сожалению мне не нужно авто открытие. Может эта инфа как-то поможет разобраться в данном вопросе. Спасибо, плагин отличный! Еще бы проблемку эту решить и будет вообще супер 🙂

  • Максим:

    скажите пожалуйста, где можно размер шрифт поменять

  • Александр:

    Доброго времени суток! Спасибо ОГРОМНОЕ за плагин. То что искал, но есть одно НО! После того как закрываю модальное окно — появляется дополнительная полоса вертикальной прокрутки на сайте......в чем может быть проблема?

Оставить комментарий

Поиск
Мебель на заказ

Частный мастер 8(909)676-75-73