Joomla как сделать всплывающее окно

Обновлено: 24.04.2024

Обзор DJ-Suggester. Всплывающее окно на сайте Joomla

DJ-Suggester – это плагин Joomla, который позволяет настроить вывод всплывающего окна внизу страницы сайта с предложениями. В качестве предложений могут выступать материалы Joomla, K2, Zoo, товары DJ-Catalog2, DJ-Classifieds и записи EasyBlog. Помимо этого можно выводить в этом окне любой модуль. Само всплывающее окно появляется в нижней части страницы, когда пользователь прокручивает её вниз, и не перекрывает содержимое.

Также предлагаю Вам рассмотреть аналогичный плагин - Regular Labs Modals Free.

Обзор будет проходить в последней, на момент написания статьи (19.07.2016), русскоязычной версии DJ-Suggester 2.4.2 в Joomla 3.6. Демонстрационный сайт DJ-Suggester.

Особенности DJ-Suggester

Рассмотрим основные, на мой взгляд, особенности DJ-Suggester.

Совместимость с Joomla 1.5 и 3.х.
Переведён на русский и английский языки.
Возможность создания ненавязчивых всплывающих окон (рисунок ниже) с рекомендованным контентом из текущей категории. Не нарушая рекомендации поисковых систем.

Интеграция с материалами Joomla, K2, Zoo, DJ-Catalog2, DJ-Classifieds, EasyBlog.
Анимация при появлении и исчезни окошка.
Пять предварительно настроенных тем оформления всплывающего окна. Возможность самостоятельной адаптации темы под свой шаблон сайта.
Возможность отображения любых модулей во всплывающем окне. Таким образом можно организовать рекомендацию товаров в VirtueMart.
Возможность отображения модуля вместо или с рекомендациями во всплывающем окне.
Возможность задания стиля модуля.
Возможность задания работы DJ-Suggester только на определённых страницах сайта (привязка к пунктам меню).
Задание ограничения на длину текста в окошке.
Задание расстояния (в пикселях), на которое должен опуститься пользователь, чтобы появилось всплывающее окно.
Возможность автоматически прятать окошко при прокрутке страницы вверх. Или только «ручное» скрытие.
Хорошая техническая поддержка и документация (на английском языке).

Гибкие настройки рекомендованного контента.

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

Настройка плагина

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

Вкладки 3-8 содержат опции для интеграции с соответствующими расширениями. Для этого у Вас должны быть установлены эти расширения. Опции аналогичны для каждого случая интеграции. Рассмотрим только для материалов Joomla (com_content).

DJ-Suggester

На вкладке Плагин (рисунок выше) собраны настройки, которые влияют в случае с интеграцией с любым расширением.

Отступ. Данная опция позволяет задать расстояние (в пикселях) до низа страницы, при достижении которого будет появляться всплывающее окно на сайте Joomla.

Показывать только один раз. Если включить данную опцию, то окошко не будет показано пользователю повторно, если он его закрыл. Считаю, что стоит её включить. Навязчивость никто не любит.

При помощи опций Тип фильтра меню и Элементы меню Вы можете указать, на каких страницах сайта нужно\ненужно показывать модуль всплывающего окна Joomla.

Вкладка Материалы (рисунок ниже), а также другие вкладки, предназначенные для настройки интеграции, содержат схожие опции. При помощи опций Следующая категория, Тип фильтра категорий и Категории можно не только указать, в каких категориях отображать всплывающие окна, но и из каких категорий отображать предложения. При помощи опции Сортировать по можно указать, по какому «принципу» будут выбираться рекомендации из категории.

Модуль всплывающего окна Joomla

На рисунке ниже пример настроек интеграции с DJ-Catalog2.

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

На вкладке Настройки предложений модулей (рисунок ниже). Можно указать, как следует отображать модули Joomla во всплывающем окошке DJ-Suggester. Можно указать настройки стиля и задать опции, указывающие, как должны отображаться рекомендации и модуль. Вы сможете показать любой модуль в окошке предложения DJ-Suggester путём публикации этого модуля в позиции модуля «dj-suggester-plugin».

Настройки предложений модулей

При необходимости (не рекомендуется) можно будет добавить настраиваемую позицию модуля во всплывающее окошко DJ-Suggester, путём добавления следующего кода в описание элемента - синтаксис:

загружает модуль, опубликованный в позиции «position-10», отрисовывает модуль в скруглённом стиле и заменяет предложение автоматически сгенерированным для компонента, если такое существует. «Order» и «style» опциональны и они переопределяют настройки плагина.

Надеюсь, что статья пригодится Вам при решении вопроса о выборе расширений для создания всплывающих окон. Не забывайте, что «классические» всплывающие окна на весь экран с шокирующим контентом и без возможности их закрыть – может сильно навредить Вашему сайту. А вот ненавязчивые, такие, как позволяет создать DJ-Suggester, могут повысить конверсии и увеличить вовлеченность (поведенческие факторы) посетителей.

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

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

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

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

Как сделать всплывающее окно на сайте joomla 3 с помощью плагина или вставки кода?

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

Окно видео было ограничено размерами самого модуля сайта;
Если нужно открыть окно просмотра большего размера посетитель уходил с блога на сам сервис YouTube, тем самым я не только давал исходящую ссылку, теряя в весе страницы, но и самого посетителя с сайта;
На различных мобильных устройствах простая вставка кода плохо отображало видео или же оно вовсе обрезалось.

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

Содержание

Создание всплывающего окна на сайте joomla со вставкой видео из Youtube

Лично я свой блог сделал на Джумла, многие ее не любят, но это те, кто привык делать дневники на вордпрессе все под один дизайн. Для Джумла я использую интересный текстовый редактор JCE Editor, который зарекомендовал себе не только как удобный в использовании плагин, но и как наиболее безопасный в отличие от TinyMCE, благодаря уязвимости в котором неоднократно ломали сайты. Так вот. Если вы используете данный редактор, то нам необходимо скачать на официальном сайте для него расширение под названием JCE MediaBox. Это делается для дальнейшей связки редактора с последующей настройки окон.

Давайте покажу на своем примере как я вставляю видео, распложенное в правой колонке моего блога. Тут нам понадобится картинка, любого формата, но желательно, чтобы она была подогнана по ширине и высоте модуля. Нарисовать ее можно в фотошопе или же просто вставить скриншот, так как границы модуля в любом случае ее обрежут. Я выбрал скриншот одного из своих видео по созданию гиф анимации картинки и вставит в произвольный модуль html. Отлично, наша картинка подогнана и вставлена по размеру.

Далее нам необходимо зайти на страницу самого видео в YouTube и скопировать его адрес из адресной строки браузера.

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

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

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

Вот такое прикольный эффект должен получиться в окне при нажатии после вставке видео (кликаем на картинку):

Создание всплывающего окна с помощью стороннего скрипта

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

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

Итак, приступим к установке данного скрипта поэтапно:

Теперь между тегами /body вставляем следующий код:

setTimeout(openColorBox, 5000); </script> (числовое значение данной строки задает в миллисекундах время появления данного окна).

После обновления страницы должно появиться окно с надписью, которую мы заключили в тег <h2>.

Создание галереи изображений на странице материала или в модуле плагином SigPlus

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

Данный плагин имеет массу возможностей и очень полезен при создании любого сайта и решения ряда проблем. Вот некоторые особенности:

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

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

Ниже приведу скриншоты со всеми настройками, кстати они выполнены в виде этой галереи, заодно и живое демо.

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

Модальные окна на сайте Joomla с помощью плагина RokBox

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

вывести видео YouTube при нажатии на ссылку в тексте;
вывод материалов в окно с активными кнопками;
сделать окно при нажатии на картинку или группу картинок (галерея);
можно в окно вставить форму подписки на рассылку сайта .

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

К примеру нам надо вывести картинку в окне и тут мы берем с демо страницы нужный нам синтаксис и вставляем в статью, выбрав нужный кусок текста в качестве анкора и выглядит это так (ниже в окне увидите код которые я вставил в сслыку).

Подведем итог положительных моментов использования всплывающих окон на сайте:

Акцентирование внимания на важных акциях и полезной информации посетителей сайта;
Возможность возврата клиентов с помощью специальных форм с поощрениями при подписке;
Компактное отображение большого числа картинок не нагружаю сервер при работе больших компонентов CMS;
Удержание пользователей на страницах своего сайта при просмотре видео с различных устройств;
Улучшение поведенческих факторов при удобном использовании элементов сайта;
Сбор базы подписчиков с использованием всплывающих форм при заходе на сайт или при уходе с сайта.

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

Создаём всплывающее окно авторизации для Joomla

Эффект «всплывающего окна» на сайтах не редкость. Каждый использует его по собственному усмотрению, одни пытаются создать красивый и анимированный объект, а другие просто экономят места на странице. Чаще всего такой приём использую для создания полноценной галереи, чтобы изображения открывались в полный размер. На странице устанавливают миниатюру картинки и добавляют к ней особое значение в тегах, после нажатия по миниатюре скрипт находит оригинал и грузит его на передний план монитора. Как бы там ни было, уметь создавать подобный эффект будет полезно каждому. Сегодня мы рассмотрим всплывающее окно, в котором будет располагаться модуль авторизации (зайти на сайт под логином и паролем). Создадим кнопку на сайте, при помощи которой будет открываться форма авторизации. Особой версии joomla для этого не требуется, как в прочем и неважно какой шаблон используется. Но для чистоты эксперимента, у меня Joomla 3.x и стандартный protostar.

1. Создаём файлы для всплывающего окна

Первым делом создаём файлы facebox.js и facebox.css при помощи программы notepad++. Их мы кладём в папку с тем же названием facebox:

facebox.js отвечает за анимацию, но не умеет определять что конкретно необходимо показать. Он работает только с теми элементами, которые имеют определённое значение в тегах. И даже в этом случае придётся ему подсказать, где они. Поэтому на странице будем дописывать небольшой скрипт. Но об этом позже, а сейчас в facebox.js вставляем это:

В facebox.css вставляем следующие:

С эффектом мы закончили.

2. Устанавливаем в шаблон

Теперь нужно полученную папку facebox разместить у себя в шаблоне. Я бросаю её к себе в protostar (путь по умолчанию …/templates/protostar/). Далее открываем файл index.php всё того же шаблона и перед тегом </body> в самом низу страницы вставляем следующее:

Здесь мы заключили, пока ещё не созданный, модуль в теги div с идентификатором id="login-modal". А так же скрыли вывод на странице сайта при помощи style="display:none;". Суть в том, что при использовании идентификатора со значением login-modal, скрипт даст команду для вывода на странице, при условии, что кнопка нажата. Этот элемент должен быть скрыт, чтобы форма авторизации всегда возвращалась в положение display:none;.

3. Создаём позицию под модуль

Во втором пункте мы уже добавили модуль в index.php с названием login. Но такой позиции пока не существует в нашем шаблоне. Поэтому открываем файл templateDetails.xml (путь по умолчанию …/templates/protostar/templateDetails.xml) и дописываем следующее:

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

4. Добавляем стили

Таблица стилей, отвечающая за показ всплывающего окна, уже есть в файле facebox.css. Однако стили кнопки ещё не написаны. Поэтому открываем файл template.css (путь по умолчанию …/templates/protostar/css/temlate.css) и дописываем в самом низу это:

5. Делаем кнопку на сайте и подключаем скрипты

Для начала нам понадобиться подключить скрипты. Для этого снова открываем файл index.php шаблона и между тегами <head></head> вставляем этот код:

Здесь подключена библиотека jquery, а так же файлы, созданные и расположенные в папке facebox. Ниже есть небольшой скрипт, без него работать всё, что мы сделали, не будет. Его основная задача определить на странице элементы, имеющие значения rel="facebox" в тегах и сработать по нажатию на них. Если такие элементы есть, а наша кнопка имеет такое значение, то будет открываться скрытый модуль (форма авторизации). На самом деле не обязательно всю эту работу проделывать ради того чтобы создать красивый вход на сайт, это могут быть и другие модули. Кстати, принцип вывода картинок из миниатюр в оригинал тот же самый. То есть, там так же определяется наше значение и скрипт показывает, отличие только в том, что создаётся специальная ссылка с двумя картинками одновременно со значением href=”” вместо кнопки.

Теперь необходимо вставить кнопку. Вы можете делать это где угодно, у меня это сразу после открывающегося тега <body>:

6. Добавляем форму авторизации

Заключение

Кнопка входа установлена в верхней части сайта и не подвижка, а вот форма имеет фиксированное положение в зависимости от экрана. То есть в центре по ширине и остаётся в таком положении при скроллинге страницы. Для того чтобы окно скрылось, нажимаем на любое место вне окошка. Стили модуля в этом примере мы не рассматривали. Менять стандартные не правильно, так как при обновлении движка или шаблона всё потеряется (у нас ведь стандартный protostar). В этом случае, лучше создавать копию модуля и менять внешний вид по собственному усмотрению.

Modals: модальные окна в Joomla 3

Обзор плагина Modals для реализации модальных окон в контенте страниц сайта на Joomla 3.x: описание функционала, список возможностей и особенности настройки Modals.

Содержание

Расширение: Modals Категория: контент Включает: плагин Совместимость: Joomla 3.x Версии: бесплатная, платная Разработчик: Regular Labs

Вступление и видеообзор

К сожалению, на текущий момент базовый функционал Joomlа 3.x не предусматривает возможность вывода контента в модальных окнах. Вернее, это возможно средствами фреймворка Bootstrap 3, применяемого в шаблонах ядра (Isis, Protostar) и многих других шаблонах от сторонних разработчиков, но это слишком сложно для непросвященных администраторов.

Существует множество сторонних расширений, позволяющих создавать модальные окна в Joomla, и в данном материале мы рассмотри плагин Modals — лучшее в своём роде расширение от разработчика RegularLabs.

Описание плагина Modals

Modals — плагин для Joomla, позволяющий реализовывать модальные окна c любым контентом:

текст
материалы и другие внутренние страницы сайта
внешние страницы
картинки
видео
галереи

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

Существует бесплатная и платная версия Modals.

Возможности плагина Modals

Вставка в любом месте

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

Различные стили

Вы можете выбрать подходящий вашему сайту стиль отображения модального окна.

Вставка картинок и видео

Вывод зображений, видео и других медиа-элементов в модальных окнах.

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

Специальный класс для ссылок

Возможность создания модальных ссылок присвоением специального класса.

Галереи и слайдшоу

Создание галерей через один тег. Добавление функции слайдшоу к галереям.

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

Все картинки с поределенным классом будут открываться в модальном окне по клику.

Пользовательский контент

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

Материалы Joomla

Вставка и вывод в модальном окне содержимого конкретного материала компонента контента Joomla.

Группы ссылок

С помощью тега можно группировать модальные ссылки для обеспечения навигации в модальном окне.

Открытие при загрузке страницы

Можно назначить автоматическое открытие модального окна сразу после загрузки страницы.

Автоматическое закрытие

Возможность определять время для автоматического закрытия модальных окон.

Внешние ссылки

Открытие всех внешних ссылок в модальных окнах.

Target Blank

Преобразование всех ссылок с атрибутом target="_blank" в модальные ссылки.

Определение типов файлов для отображения в модальных окнах.

Указание в теге URL-адреса страницы, которую необходимо вывести в модальном окне.

Установка и активация Modals

Установка осуществляется через Менеджер расширений Joomla, или через компонент Regular Labs - Extension Manager.

После установки расширения перейдите в Менеджер плагинов (Расширения → Плагины), найдите плагин System - Regular Labs - Modals и активируйте его, если он отключен.

Настройка плагина Modals

Кликните по названию плагина System - Regular Labs - Modals в Менеджере плагинов.

Настройки плагина Modals

Рассмотрим настройки в каждой вкладке.

Вкладка Плагин

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

Вкладка Настройки по умолчанию

Здесь регулируются настройки размеров модальных окон. Изменяйте их, только если настройки по умолчанию вас не устраивают.

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

Здесь можно поменять текст на кнопке (по умолчанию Modal ), с помощью которой можно вставлять модальные ссылки в контент Joomla, а также включить или выключить кнопку во внешнем интерфейсе.

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

Здесь можно изменить текст для тега вставки модальных ссылок (по умолчанию modal ), поменять символы, окружающие тег (по умолчанию <. >), и осуществить другие настройки.

Добавление модальных окон в контент Joomla

После установки и активации Modals в визуальном редакторе появится кнопка Modals (если вы не изменили название кнопка в настройках плагина или не отключили плагин Button - Regular Labs - Modals ).

Чтобы вставить модальную ссылку в контент:

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

URL
Изображения
Фото галерея
Видео
Материал
Материалы

Хотите прочитать позднее, сохраните к себе на стену в социальной сети или просто поделитесь с друзьями.

Всё о Joomla в одном месте

Последняя версия
Joomla ! — 3.9.18
(от 21.04.2020)

Разделы сайта

Joomla.center is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Joomla!® является торговой маркой компании Open Source Matters inc в США и др. странах. Название Joomla! и его вариации используются в рамках ограниченной лицензии, определённой компанией Open Source Matters. Проект joomla.center не относится к компании Open Source Matters или проекту Joomla! Точки зрения представленные на данном сайте не являются официальными точками зрения Joomla Project или Open Source Matters. Торговая марка Joomla® и логотип используются в рамках ограниченной лицензии, предоставленной Open Source Matters.

Engage Box: всплывающие окна в Joomla 3

Engage Box — мощное коммерческое расширение , позволяющее создавать в Joomla всплывающие окна (popups - попапы), помогающие конвертировать посетителей сайта в подписчиков и клиентов.

Расширение: Engage Box Категория: элементы контента Включает: компонент, плагин, модуль Совместимость: Joomla 3.x Версии: платная Разработчик: Tassos Marinos

Возможности Engage Box

Ниже приведено описание возможностей расширения от разработчика.

Основные особенности

множество всплывающих окон
адаптивные всплывающие окна (совместимые с мобильными устройствами и планшетами)
более 60 эффектов анимации
открытие модулей Joomla во всплывающих окнах
функция обнаружения типа устройства
назначение созданных попапов определенным группам пользователей, страницам, URL-адресам или даже языкам
всплывающие окна при выходе (запуск попапа перед закрытием страницы или выходом пользователя)
JS-триггеры onPageReady, onPageLoad, onPageLeave, onUserScroll, onClick, onHover, onDemand
9 готовых позиций для триггеров
куки для попапа в зависимости от минут, часов, дней или сессии
таймер для автоматического закрытия всплывающего окна
Интеграция с Google Analytics
Javascript API разработчика

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

Engage Box позволяет выводить в попапах:

opt-in для AcyMailing , MailChimp, Aweber, SalesForce, GetResponse
любые модули компонентов Breezing Forms, RSForm!, EasyBlog, JEvents, Phoca Gallery, ChronoForms
социальные кнопок для лайков и расшаривания
карты Google Maps и Яндекс.Карты
форма авторизации
запрос для подтверждения возраста
видео с Youtube или Vimeo
любые формы
оповещение об использовании куки
панель уведомлений

Функции всплывающих окон

К сведению: Компонент Engage Box рассматривается в курсе Ваш сервис по созданию Landing Page на Joomla. Хотите прочитать позднее, сохраните к себе на стену в социальной сети или просто поделитесь с друзьями. Отличное расширение!

Всё о Joomla в одном месте

Последняя версия
Joomla ! — 3.9.18
(от 21.04.2020)

Разделы сайта

Обзор Regular Labs Modals Free. Модальное окно 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.

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

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

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

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

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

Modals Free

Modals Pro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создать PopUp окна в Joomla

Базовые функции:

изменение внешнего вида сайта;
создание и хранение баз данных;
объединение с ресурсом на HTML.

Что такое PopUp окна

Мгновенно всплывающие окна PopUp знакомы каждому пользователю всемирной паутины. Именно они всплывают при посещении сайта и привлекают к себе внимание, закрывая содержимое страницы. Назначений у них может быть множество. Как правило, они информируют о новостях или несут в себе предложение:

перейти по ссылке;
подписаться на обновления;
участвовать в опросе;
узнать об акциях и т.д.

Плагин Simple Pop-Up

Установка плагина

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

перейдите в раздел “Расширения”/“Менеджер расширений”/“Установить”;
выберите файл пакета на своем компьютере;
нажмите кнопку “Загрузить и установить”.

Теперь, когда с установкой плагина покончено, можно переходить к настройкам. Перейдите в раздел “Расширения”/“Менеджер плагинов”, чтобы включить расширение Simple Pop-up и приступить к его редактированию.

Настройка плагина

Align text — выравнивание текста (слева/справа/ по центру);
Pop-up box width (in pixels) и Pop-up box height (in pixels) — ширина и высота окна (в пикселях). Ширина по умолчанию — 400, высота — auto (модальное окно будет “растягиваться” в зависимости от объема контента);
Auto Dimensions — активация автоустановки размеров модального окна (рекомендуется выбрать пункт “Нет”);
Use cookie (to only show once) — использование cookie (выбирая параметр “Да” нужно указать в поле Cookie persistence (in days) через какой промежуток времени пользователь увидит модальное окно):

Во вкладке “Дополнительные параметры” представлены следующие настройки: Load FancyBox through Joomla, Load FancyBox, Debug mode. В целом их можно не менять, поскольку они выставлены корректно:

Обязательно сохраните изменения, прежде чем перейти к следующему шагу.

Создание всплывающего модального окна

Далее все просто: нужно перейти в интересующий вас материал (или создать новый) и заключить тот или иной текст в теги и . Например:

На сайте всплывающее модальное окно будет выглядеть так:

Расширения для создания всплывающих окон в Joomla 3

Если вам необходимо создать эффект всплывающего окна или превратить URL во всплывающее окно, то для этого потребуется поставить расширение, которое реализует на сайте Joomla 3 модальные она или как их еще называют «лайтбоксы». Далее в материале мы рассмотрим несколько таких расширений для Joomla 3.

Simple Pop-Up: плагин для создания всплывающих модальных окон

Этот совсем небольшой плагин в первую очередь используется для отображения всплывающего модального окна; также используется для отображения небольшой галереи или списка файлов в привлекательном всплывающем окне.

Некоторые особенности плагина:

на одной странице можно создавать не одно всплывающее модальное окно, а сразу несколько;
можно использовать внешнее содержимое (вставка через URL);
добавление описаний к изображениям;
плагин можно использовать как галерею, есть кнопки для перелистывания «вперед» и «назад»;
поддержка файлов cookie.

Читайте также: