Плагин modals joomla 3 не работает

Модальное окно joomla без всяких заморочек

Модальное окно joomla придает сайту красоту и профессионализм. Бесспорно это хороший инструмент, расширяющий и без того отличные возможности движка. Но вот как его создавать и какие есть для этого варианты, мы и рассмотрим в этом посте.

Модальное окно joomla без плагинов

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

Кроме стандартных способов открывания: в новом окне, в родительском, во всплывающем, а так же и модально.

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

Фанаты данного движка конечно в курсе, что все необходимые скрипты в системе идут по умолчанию в базовом комплекте. По крайней мере, в joomla 3.8.2 именно так, не говоря уже о более старых версиях.

Находятся все они в папке \media\system\js\

А данная строчка кода, именно активирует библиотеку «SqueezeBox», которая по умолчанию отключена и таким образом мы просто ее подключаем.

Этим способом хорошо добавлять видеоролики с youtube. Размер видео редактируется в фигурных скобках.

В результате мы видим, что к ссылкам добавляется, который можно редактировать в свойствах стилей.

Например, чтобы убрать белую рамку вокруг видео, необходимо отредактировать css-файл \media\system\css\modal.css
У меня это строка 27. Убрать внутренний отступ (padding:10 px;), или добавить что-то свое.

Страницу своего или стороннего сайта, системное сообщение, модуль joomla так же можно открыть в модальном окне используя следующий html-код:

Меняется только ссылка и размер окна.

Модальное окно joomla с помощью плагина modals

Примеры использования плагина можно посмотреть здесь

Скачать плагин можно на сайте разработчика

Принцип работы очень прост.

После установки плагина, в редактор joomla добавляется дополнительная кнопка «Modal», с помощь которой можно вставить ссылку и картинку для вывода в модальном окне.

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

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

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

Все остальные функции (фотогалерея, видео, статья), доступны в версии PRO

Как обойти эти ограничения я расскажу в этом видео

Модальное окно joomla с помощью bootstrap

При использовании bootstrap, необходимы некоторые условия:
шаблон joomla должен быть на бутстрапе или просто подключить этот фреймворк к своему шаблону joomla.

Достаточно скопировать код и вставить в статью в режиме html, как показано на сайте разработчика. Я немного изменил этот код на русские заголовки.

Там же можно найти еще много различных компонентов для отображения информации в модальном окне.

Есть и другие, более сложные возможности сделать тоже самое, например с помощью php, jquery и пр.

Пожалуй на этом стоит остановиться. Это наиболее простые и доступные варианты не только для joomla, но и других cms.

На этом пока все.

Если статья или видео оказались для вас полезны, поделитесь с друзьями.

Источник

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

• Тип – плагин для создания popup в Joomla

Regular Labs Modals Free – бесплатный русскоязычный плагин Joomla для создания всплывающих окон. Он позволяет открывать в модальном окне материал, страницу своего сайта или чужого сайта, а также даёт возможность открывать в 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. Она обладает более расширенным набором опций. Об отличиях платной и бесплатной версий можно прочесть ниже в статье

Видео урок

• Вставка тега при помощи кнопки редактора – 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.

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

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

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

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

Модальное окно в Joomla Popup в Joomla

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

Основные отличия

Modals Free

Modals Pro

Всплывающее окно Joomla может быть открыто по ссылке, вставленной куда угодно, где можно ввести текст

6 стилей модального окна

Открытие в popup окне материала, страницы своего сайта, страницы чужого сайта

Открытие во всплывающем окне изображений, видео и других медиа-файлов

Модальное окно Joomla может открываться по ссылке со специальным тегом или CSS классом ссылки. Возможность задавать исключения URL адресов.

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

Вставка модулей и текста из материала в popup

Автоматическое открытие существующих изображений в модальном окне. При помощи добавления CSS класса к изображениям

Упрощённое создание всплывающих окон, содержащих материалы, миниатюры и видео, со специальными атрибутами

Автоматическое появление всплывающего окна при загрузке страницы (возможно указать задержку в открытии)

Автоматическое закрытие модального окна после заданного времени

Настройки горизонтального и вертикального положения popup окна

Группировка нескольких модальных окон на странице с возможностью переключения между ними (вперёд/назад)

Возможность настройки отображения всех внешних ссылок во всплывающем окне

Возможность настройки отображения всех ссылок с атрибутом «target=_blank» во всплывающем окне

Фильтрация типов файлов, которые будут открываться во всплывающем окне. Например, PDF

Указание URL адресов, или их частей при помощи регулярных выражений, которые всегда будут открываться в popup окне

Доступ к форуму технической поддержки

Настройки

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

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

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

Синтаксис тегов

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

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

Regular Labs Modals

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

Стили всплывающего окна

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

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

Медиа

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

Автоматическая конвертация

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

Настройки кнопки редактора

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

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

Дополнительные параметры

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

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

Кнопка в редакторе

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

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

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

После вставки ссылки в окне редактора появится специальный тег (рисунок ниже) – «Моя ссылка».

Тег в материале в админке

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

Тег в материале на сайте

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

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

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

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

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

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

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

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

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

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

Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

Источник