Обзор Regular Labs Modals Free. Модальное окно Joomla

• Видео урок.
• Основные возможности и особенности.
• Сравнение плагинов.
• Настройки.
• Вставка всплывающего окна в Joomla.
• Русификатор Regular Labs Modals.

Regular Labs Modals Free – бесплатный русскоязычный плагин Joomla для создания всплывающих окон.

Видео урок

• Вставка тега при помощи кнопки редактора – 00:01:06.
• Ссылка на свой сайт – 00:02:31.
• Ссылка на материал – 00:03:24.
• Настройки модального окна – 00:04:28.
• Ссылка на видео – 00:06:05.
• Ссылка на картинку – 00:07:07.
• Пункт меню в качестве ссылки на модальное окно – 00:07:58.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Плагин позволяет открывать в модальном окне материал, страницу своего сайта или чужого сайта, а также даёт возможность открывать в popup окне изображения, видео и другие медиа-файлы. Всплывающие окна могут открываться по нажатию на текст или даже на пункты меню (возможно с большинством модулей меню). Примеры модальных окон, сделанных при помощи данного плагина, можно посмотреть тут. Некоторые из них сделаны при помощи платной версии плагина.

Всплывающие окна ещё называют модальными, popup или lightbox окнами.

В обзоре участвует последняя, на момент написания статьи (05.10.2019), русскоязычная версия Regular Labs Modals Free 11.5.5 в Joomla 3.9.12. Демонстрационный сайт на английском языке с шаблоном JM Services.

На официальном сайте расширений Joomla 154 отзыва, расширение добавлено 04 ноября 2008 года.

• Общий рейтинг – 5 из 5.
• Функциональность – 5 из 5.
• Простота использования – 5 из 5.
• Поддержка – 5 из 5.
• Документация – 5 из 5.

Также есть платная версия Modals Pro – €39. Она обладает более расширенным набором опций. Об отличиях платной и бесплатной версий можно прочесть ниже в статье

Основные возможности и особенности

• Всплывающее окно Joomla может быть открыто по ссылке, вставленной куда угодно, где можно ввести текст.
• 6 стилей модального окна.
• Открытие в popup окне материала, страницы своего сайта, страницы чужого сайта (рисунок ниже).

• Открытие во всплывающем окне изображений, видео (рисунки ниже) и других медиа-файлов.
• Модальное окно Joomla может открываться по ссылке со специальным тегом или CSS классом ссылки. Возможность задавать исключения URL адресов.
• Возможность настройки тега для создания текста открывающего модальное окно.
• Затемнение фона позади всплывающего окна.
• Настройки ширины и высоты окна.
• Масштабирование изображений в модальных окнах для retina-экранов (экраны с большой плотностью пикселей (разрешением)).
• Наличие плагина кнопки редактора, для упрощения вставки тега всплывающего окна. В админке и во фронтальной части сайта.
• Возможность создания всплывающих окон в админке Joomla.

Сравнение плагинов

Настройки

Настройки плагина разделены на 7 вкладок:

1. Плагин. Содержит краткое описание плагина и стандартные для всех плагинов Joomla опции, позволяющие включить/отключить его.
2. Оформление.
3. Медиа.
4. Автоматическая конвертация.
5. Настройки кнопки редактора.
6. Синтаксис тегов (рисунок ниже). Позволяет изменить синтаксис вставляемого в текст тега (для создания ссылки на открытие всплывающего окна).
7. Дополнительные параметры.

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

Вкладка Оформление (рисунок ниже). Содержит настройки, которые влияют на внешний вид всплывающего окна.

• Автоматическая корректировка изменения размера. Если опция включена, то всплывающее окно произведёт дополнительное изменение размера после того, как загрузится содержимое всплывающего окна. Это решит проблемы с размером для определённых типов контента.
• Задержка автоматического изменения размера (мс). Задержка (в миллисекундах) после которой всплывающее окно должно выполнить автоматическую корректировку размера. Увеличьте это значение, если у вас есть (более медленные) скрипты, вызывающие изменения в измерениях модального содержимого.

На рисунке ниже показаны 5 из 6 стилей всплывающего окна.

Вкладка Медиа (рисунок ниже). Содержит опции, относящиеся к медиа-файлам.

• Автоматические заголовки. Заголовок модального окна будет автоматически сформирован на основе имени файла. Это относится только к медиа-файлам.
• Добавление автоматических заголовков. Влияет на регистр букв в автоматических заголовках: все строчные, все прописные, первые буквы слова строчные и так далее.
• Масштабировать изображения. Если на вкладке Оформление были заданы значения для максимальной ширины/высоты, ширины/высоты, то плагин изменит масштаб изображений, чтобы они соответствовали заданным значениям.
• Retina изображения. Плагин изменит размер текущего изображения, чтобы соответствовать разрешению Retina-экрана. Подробнее об Retina-экранах можно узнать тут.
• URL Retina. Если опция активна и у устройства дисплей с высоким разрешением, плагин заменит расширение файла текущей фотографии расширением с суффиксом Retina+.

Вкладка Автоматическая конвертация (рисунок ниже). Содержит опции, позволяющие задать открытие ссылок с определённым классом во всплывающем окне. Тут же можно задать исключения для определённых URL адресов (можно указывать полный адрес или его часть).

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

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

• Суб-шаблон. Это суб-шаблон, используемый для внутренних страниц в модальных всплывающих окнах. Должен быть php-файл с этим именем в папке с шаблонами или в папке системных шаблонов.
• Загрузить скрипты/стили. Выберите данную опцию для загрузки скриптов, стилей и других данных заголовка документа, встроенных в модальное содержимое. Включайте только тогда, когда определённые функции/стили не работают внутри модальных окон.
• Добавить скрипт перенаправления. Если опция включена, то на всплывающие страницы будет добавлен скрипт перенаправления, который будет загружать эти страницы как обычные, если они не были открыты во всплывающем окне.

Вставка всплывающего окна в Joomla

Рассмотрим, как при помощи плагина Modals можно вставить всплывающее окно в Joomla. Будем делать это на примере вставки специальной конструкции в материал Джумла, но это актуально для любого другого места, где обрабатываются системные плагины. Больше информации, на английском языке, можно получить в документации на сайте разработчика.

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

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

После вставки ссылки в окне редактора появится специальный тег (рисунок ниже) – «{modal url="https://aleksius.com/"}Моя ссылка{/modal}».

На сайте это выглядит так, как показано на рисунке ниже. А по нажатию на «Моя ссылка» откроется всплывающее окно, в котором будет отображаться страница сайта «https://aleksius.com/».

Рассмотрим ещё несколько вариантов вставки ссылки на открытие модального окна. В видео-уроке выше в статье Вы можете увидеть примеры действий, которые нужно произвести, и их результаты.

«Открыть модальное окно» – текст ссылки, по нажатие на которую можно открыть модальное окно. Его можно менять.

Вставка материала:

{modal url="index.php?option=com_content&view=article&catid=1&id=123"}Открыть модальное окно{/modal}

Где, «index.php?option=com_content&view=article&catid=1&id=123» – не ЧПУ ссылка на материал Joomla.

Для открытия модального окна по нажатию на пункт меню, вставьте «{modal}Открыть модальное окно{/modal}» (без кавычек ёлочек) в настройки пункта меню в поле Заголовок меню.

Для вставки видео:

{modal url="https://www.youtube.com/embed/dEjVmqsB20Y" width="560" height="315" title="Modals - Getting Started"}Открыть модальное окно{/modal}

Где «https://www.youtube.com/embed/dEjVmqsB20» ссылка на видео с видео-хостинга YouTube. Также можно добавлять видео с Vimeo. Вставка видео возможна, только если Ваш сайт работает по протоколу HTTPS.

Для вставки изображения:

{modal url="images/kartinka.jpg"}Открыть модальное окно{/modal}

Где «images/kartinka.jpg» – путь к файлу изображения, начиная с корневой папки сайта.

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

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Официальный сайт.