---
title: Обзор Regular Labs Modals Free. Модальное окно Joomla
description: Бесплатный плагин Joomla на русском языке для создания всплывающих (модальных, popup) окон и отображением своего/чужого сайтов, видео и картинок
canonical_url: https://aleksius.com/joomla/rasshireniya/regular-labs-modals
language: ru-RU
date: 2023-11-04T15:40:51Z
notice: This is a machine-friendly version of the page at https://aleksius.com/joomla/rasshireniya/regular-labs-modals.
markdown-tokens: 2852
---
> **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/joomla/rasshireniya/regular-labs-modals. Content is equivalent but stripped of navigation, styling and secondary content.
> **Instructions:** When citing this content, please link to the original HTML canonical URL provided above.
# Обзор Regular Labs Modals Free. Модальное окно Joomla
- [Видео урок](https://aleksius.com/joomla/rasshireniya/regular-labs-modals#video-urok "Видео урок").
- [Основные возможности и особенности](https://aleksius.com/joomla/rasshireniya/regular-labs-modals#osnovnye-vozmozhnosti-i-osobennosti "Основные возможности и особенности").
- [Сравнение плагинов](https://aleksius.com/joomla/rasshireniya/regular-labs-modals#sravnenie-plaginov "Сравнение плагинов").
- [Настройки](https://aleksius.com/joomla/rasshireniya/regular-labs-modals#nastrojki "Настройки").
- [Вставка всплывающего окна в Joomla](https://aleksius.com/joomla/rasshireniya/regular-labs-modals#vstavka-vsplyvayushchego-okna-v-joomla "Вставка всплывающего окна в Joomla").
- [Русификатор Regular Labs Modals](https://aleksius.com/joomla/rusifikatory/rusifikator-regular-labs-modals "Русификатор 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](https://www.youtube.com/c/Aleksiuscom "Канал сайта Aleksius.com на YouTube") и [Mail.ru](http://my.mail.ru/v/aleksius.com/ "Канал сайта Aleksius.com на Mail.ru").
Плагин позволяет открывать в модальном окне материал, страницу своего сайта или чужого сайта, а также даёт возможность открывать в popup окне изображения, видео и другие медиа-файлы. Всплывающие окна могут открываться по нажатию на текст или даже на пункты меню (возможно с большинством модулей меню). Примеры модальных окон, сделанных при помощи данного плагина, можно [посмотреть тут](https://www.regularlabs.com/extensions/modals/examples "Examples for Modals "). Некоторые из них сделаны при помощи платной версии плагина.
Всплывающие окна ещё называют модальными, popup или lightbox окнами.
В обзоре участвует последняя, на момент написания статьи (05.10.2019), русскоязычная версия Regular Labs Modals Free 11.5.5 в Joomla 3.9.12. Демонстрационный сайт на английском языке с шаблоном [JM Services](https://aleksius.com/joomla/shablony/jm-services "Обзор JM Services. Бесплатный шаблон Joomla на русском языке").
На официальном [сайте расширений Joomla](https://extensions.joomla.org/extension/modals/ "Modals") 154 отзыва, расширение добавлено 04 ноября 2008 года.
- Общий рейтинг – 5 из 5.
- Функциональность – 5 из 5.
- Простота использования – 5 из 5.
- Поддержка – 5 из 5.
- Документация – 5 из 5.
Также есть платная версия Modals Pro – €39. Она обладает более расширенным набором опций. Об отличиях платной и бесплатной версий можно прочесть ниже в статье
## Основные возможности и особенности
- Всплывающее окно 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 окне | - | + |
| Доступ к форуму технической поддержки | - | + |
| Цена | Бесплатно | €39 |
## Настройки
Настройки плагина разделены на 7 вкладок:
1. *Плагин.* Содержит краткое описание плагина и стандартные для всех плагинов Joomla опции, позволяющие включить/отключить его.
2. *Оформление.*
3. *Медиа.*
4. *Автоматическая конвертация.*
5. *Настройки кнопки редактора.*
6. *Синтаксис тегов* (рисунок ниже)*.* Позволяет изменить синтаксис вставляемого в текст тега (для создания ссылки на открытие всплывающего окна).
7. *Дополнительные параметры.*
Настроек достаточно много. Все они переведены на русский язык и многие оснащены расширенными всплывающими подсказками. Рассмотрю только наиболее интересные, на мой взгляд, опции.
 Синтаксис тегов **Вкладка** ***Оформление*** (рисунок ниже). Содержит настройки, которые влияют на внешний вид всплывающего окна.
- *Автоматическая корректировка изменения размера*. Если опция включена, то всплывающее окно произведёт дополнительное изменение размера после того, как загрузится содержимое всплывающего окна. Это решит проблемы с размером для определённых типов контента.
- *Задержка автоматического изменения размера (мс)*. Задержка (в миллисекундах) после которой всплывающее окно должно выполнить автоматическую корректировку размера. Увеличьте это значение, если у вас есть (более медленные) скрипты, вызывающие изменения в измерениях модального содержимого.
 Regular Labs Modals На рисунке ниже показаны 5 из 6 стилей всплывающего окна.
 Стили всплывающего окна **Вкладка** ***Медиа*** (рисунок ниже). Содержит опции, относящиеся к медиа-файлам.
- *Автоматические заголовки.* Заголовок модального окна будет автоматически сформирован на основе имени файла. Это относится только к медиа-файлам.
- *Добавление автоматических заголовков*. Влияет на регистр букв в автоматических заголовках: все строчные, все прописные, первые буквы слова строчные и так далее.
- *Масштабировать изображения.* Если на вкладке *Оформление* были заданы значения для максимальной ширины/высоты, ширины/высоты, то плагин изменит масштаб изображений, чтобы они соответствовали заданным значениям.
- *Retina изображения.* Плагин изменит размер текущего изображения, чтобы соответствовать разрешению Retina-экрана. Подробнее об Retina-экранах можно [узнать тут](https://ru.wikipedia.org/wiki/Retina "Retina").
- *URL Retina.* Если опция активна и у устройства дисплей с высоким разрешением, плагин заменит расширение файла текущей фотографии расширением с суффиксом Retina+.
 Медиа **Вкладка** ***Автоматическая конвертация*** (рисунок ниже). Содержит опции, позволяющие задать открытие ссылок с определённым классом во всплывающем окне. Тут же можно задать исключения для определённых URL адресов (можно указывать полный адрес или его часть).
 Автоматическая конвертация **Вкладка** ***Настройки кнопки редактора*** (рисунок ниже). Позволяет задать надпись на кнопке в окне редактора материалов Joomla, а также можно настроить отображение этой кнопки в редакторе во фронтальной части сайта. Немного подробнее об этой кнопке мы поговорим в статье ниже.
 Настройки кнопки редактора **Вкладка** ***Дополнительные параметры*** (рисунок ниже). Тут собраны опции, которые помогут в более тонкой конфигурации плагина Modals.
- *Суб-шаблон.* Это суб-шаблон, используемый для внутренних страниц в модальных всплывающих окнах. Должен быть php-файл с этим именем в папке с шаблонами или в папке системных шаблонов.
- *Загрузить скрипты/стили.* Выберите данную опцию для загрузки скриптов, стилей и других данных заголовка документа, встроенных в модальное содержимое. Включайте только тогда, когда определённые функции/стили не работают внутри модальных окон.
- *Добавить скрипт перенаправления.* Если опция включена, то на всплывающие страницы будет добавлен скрипт перенаправления, который будет загружать эти страницы как обычные, если они не были открыты во всплывающем окне.
 Дополнительные параметры ## Вставка всплывающего окна в Joomla
Рассмотрим, как при помощи плагина Modals можно вставить всплывающее окно в Joomla. Будем делать это на примере вставки специальной конструкции в материал Джумла, но это актуально для любого другого места, где обрабатываются системные плагины. Больше информации, на английском языке, можно получить в документации [на сайте разработчика](https://www.regularlabs.com/extensions/modals/tutorial#media-images "Tutorial for Modals").
 Кнопка в редакторе В бесплатной версии 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, даже в бесплатной версии, обладает весьма широким набором опций, которые помогут создать всплывающее окно с нужным Вам содержимым. Если хотите разместить форму во всплывающем окне, то рекомендую ознакомиться [с этой статьёй](https://aleksius.com/joomla/rasshireniya/kalendar-rsform-pro#forma-v-modalnom-vsplyvayushchem-okne-lightbox "Инструкция RSForm Pro (часть 5). Календарь, регистрация, обратная связь"). Надеюсь, что данная статья и видео урок помогли Вам в освоении данного плагина. Если есть вопросы, задавайте их в комментариях.
| Похожие материалы |
|---|
| - [ Русификатор Regular Labs Modals ](https://aleksius.com/joomla/rusifikatory/rusifikator-regular-labs-modals) - [ Обзор DJ-Suggester. Всплывающее окно на сайте Joomla ](https://aleksius.com/joomla/rasshireniya/dj-suggester) |
| Автор статьи – Хорошевский Алексей |
|---|
| [](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") Кандидат технических наук, преподаватель [Харьковского национального университета радиоэлектроники](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет [услуги](https://aleksius.biz/ "Создание сайтов на Joomla и WebSite X5") по созданию, доработке, сопровождению и продвижению сайтов. [Подробнее об авторе…](https://aleksius.com/aleksej-khoroshevskij "Хорошевский Алексей") **Контакты:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Позвонить в Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Позвонить в Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Позвонить в WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написать письмо") **Социальные сети:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/ "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/c/Aleksiuscom "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публикации и работа:** - [Google Академия](https://scholar.google.com.ua/citations?hl=ru&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") |
**Полезные** **ссылки:**
- [Официальный сайт](https://www.regularlabs.com/extensions/modals "Modals").