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

Обновлено: 20.05.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

распаковываем архив на компьютер;
выбираем нужный нам вариант example1 – example 5 и копируем на хостинг таблицу стилей окна colorbox.css и папку images;
закачиваем в папку со скриптами файл jquery.colorbox.js;
подключаем к сайту сам скрипт путем вставки в файл index.html строчки

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

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

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

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

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

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

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

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

Далее идем в корень нашего сайта в папку с изображениями Imagesи создаем там новую папку куда и будем закидывать все галереи своего сайта, к примеру, назовем ее “myphoto” и закинем нашу галерею в папке “fotki”.

Итак, плагин включен, фотки в нужной директории, теперь необходимо в самом плагине прописать путь к нашей корневой папке категорий “myphoto”, делаем как указано на скриншоте ниже.

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

< gallery>fotki < /gallery> – суть в том, что корневую папку указывать не надо в самом теге, а вставляем папку которая находится в не и получаем красивую галерею.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, даже в бесплатной версии, обладает весьма широким набором опций, которые помогут создать всплывающее окно с нужным Вам содержимым. Если хотите разместить форму во всплывающем окне, то рекомендую ознакомиться с этой статьёй. Надеюсь, что данная статья и видео урок помогли Вам в освоении данного плагина. Если есть вопросы, задавайте их в комментариях.

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

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

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

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

Хотел бы отметить, что в данной статье мы будем обсуждать технические моменты создания всплывающего окна Joomla 3, то есть, то как реализовать данный функционал. При этом мы не будем останавливаться на том, какой контент необходимо отображать, дабы наилучшим образом привлечь внимание посетителя, так как это совсем другая область. Всплывающее окно joomla 3, мы с Вами реализуем при помощи функционального плагина Simple PopUp.

Кликнув по кнопке “Download” нас перенаправят на страницу разработчика плагина.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

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

После установки переходим в менеджер плагинов, для активации и настройки расширения.

Align text – расположение текста (слева, по центру, справа);

Pop-up box width (in pixels) – ширина всплывающего окна;

Pop-up box height (in pixels) – высота всплывающего окна;

Use cookie (to only show once) – использовать ли куки, для хранения информации, о том что пользователь уже просмотрел контент модального окна joomla;

Box style – оформление всплывающего окна;

‘CLOSE’ – надпись на кнопке “Закрыть”;

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Hide download options in PDF viewer – скрывать опции скачивания при просмотре документа PDF.

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

После настройки не забываем опубликовать плагин и сохраняем изменения. Для работы плагина необходимо прописать специальный код, при формирования контента необходимой страницы. В качестве контента мы используем стандартный материал Joomla, а значит переходим в “Менеджер материалов” и открываем для редактирования произвольный материал.

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

RSForm Pro – русскоязычный конструктор форм Joomla с множеством настроек, плагинами и модулями. В предыдущей статье «Инструкция RSForm Pro (часть 4). reCaptcha v2» мы продолжали рассмотрение часто задаваемых вопросов касательно настройки компонента, в этой части поговорим про календарь, форму регистрации, форму обратной связи и о том, как выводить любую форму во всплывающем окне.

В данной инструкции рассмотрена последняя, на момент её написания (26.07.2017), русскоязычная версия RSForm Pro 1.52.14 (с модулем «RSForm! Pro Module» 1.51.1), Joomla 3.7.3. Шаблон фронтальной части сайта – RSBaraka 1.0.3, шаблон административной части сайта – Isis 1.0.0.

Внизу данной статьи, над комментариями, Вы найдёте архив с примерами из этой инструкции, которые можно импортировать на свой сайт при помощи раздела Архивация / Восстановление в компоненте RSForm Pro. Нужно извлечь скачанный Вами ZIP-архив и загружать себе в RSForm архив в формате «.tar».

Отключение суббот и воскресений в календаре

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

Чтобы запретить выбор в поле Календарь всех суббот и воскресений, вставьте в свойствах формы в разделе CSS и Javascript (в поле Javascript) следующий код:

По аналогии можно запрещать любые дни недели:

Понедельник – 1.
Вторник – 2.
Среда – 3.
Четверг – 4.
Пятница – 5.
Суббота – 6.
Воскресенье – 0.

О том, как сменить отображение первого дня недели на понедельник, можно прочесть в этой статье.

Запрет выбора конкретных дат в календаре

Рассмотрим ситуацию, когда нужно запретить пользователям выбирать определённые даты в календаре. Например, 1 и 13 августа 2017.

Чтобы запретить выбор в поле Календарь каких-то конкретных дат, вставьте в свойствах формы в разделе CSS и Javascript (в поле Javascript) следующий код:

Изменение формата даты календаря

По умолчанию, в RSForm Pro дата в поле Календарь отображается в таком формате: «13/08/2017», что соответствует 13 августа 2017 года. При необходимости можно сменить формат. Немного подробнее о синтаксисе (вариантах) формата можно прочесть тут. Для смены формата даты перейдите в настройки поля Календарь на вкладку Атрибуты и в поле Формат даты введите предпочитаемый Вами формат даты (рисунок ниже).

RSForm Pro календарь

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

Вычисление разницы в днях между двумя полями календаря

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

Есть форма с двумя полями тип Календарь и полем тип Текстовое поле. В свойствах формы в разделе CSS и Javascript в область Javascript вставьте следующий код.

В данном коде Вам нужно заменить:

В четырёх местах цифру «29» в «RSFormPro.YUICalendar.calendars[29]» на ID своей формы. ID формы можно посмотреть в Компоненты – RSForm! Pro – Управление формами (правый столбец ID формы).
Два раза заменить «kalendar_1» и «kalendar_2» на свои названия полей календарей. Обратите внимание, что сперва Вы указываете название календаря, из даты которого нужно вычитать, а потом название календаря, дату которого нужно вычитать. То есть, в моём примере из поля «Календарь 2» нужно вычитать поле «Календарь 1». На рисунке ниже, в верхней части показана форма в админке, а в нижней – на сайте.
Один раз заменить «raznica» на название Вашего текстового поля, куда Вы хотите выводить результат вычисления.
Один раз заменить только цифру «29» в «cal29_0» и «cal29_1» на ID своей формы. То есть, если ID Вашей формы «7», то у Вас это будет так: «cal7_0» и «cal7_1».

Работа с полем Выбор даты и времени

В RSForm Pro есть специальное поле Выбор даты и времени. Оно немного напоминает поле тип Календарь, но есть возможность указать не только дату, но и время. Рассмотрим несколько примеров по работе с этим типом поля.

Обратите внимание! Все нижеуказанные примеры кода нужно вводить в свойства формы раздел CSS и Javascript в область Javascript. Заменяйте название моего поля Выбор даты и времени с «vybor_daty_i_vremeni» на своё. Заменяйте ID моей формы с «32» на ID своей формы. Эти скрипты можно использовать совместно для одного и того же поля.

Пример №1. Запрет выбора субботы и воскресенья. Это аналогично описанному выше способу касательно поля Календарь.

Пример №2. Смена первого дня недели.

Пример №3. Отображение только выбора времени (без даты).

В настройках поля на вкладке Атрибуты в поле Формат даты укажите значение «H:i» (без кавычек). А в CSS и Javascript добавьте следующий код:

Выбор даты и времени

Операции с датами

Пример №1. Добавление нескольких дней к текущей дате. Нижеописанный пример показывает, как вывести дату в зависимости от текущей даты и количества дней, введённых пользователем.

Создайте поле тип Текстовое поле. Это поле отвечает за отображение текущей даты (или любой, которую в последствии введёт пользователь). В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код:

Где «d.m.o» – формат даты в виде «день.месяц.год» (формат можно менять). Пользователь сможет сменить эту дату.

Создайте ещё одно поле тип Текстовое поле. Это поле предназначено для ввода пользователем числа дней, которое будет прибавлено к текущей дате. В его настройках на вкладке Проверка в спадающем списке Правил проверки выберите Цифры.

Создайте поле тип Скрытое поле. Оно необходимо для сохранения значения вычисления.

Перейдите в свойства формы в раздел PHP скрипты и в область Скрипт, вызываемый при обработке формы вставьте следующий код:

Где «skrytoe» – название Вашего скрытого поля, «ukazhite_kol_vo_dnej» – название текстового поля с правилом проверки, «d.m.o» – формат даты точно такой, как указано в первом текстовом поле (название в моём примере «tekushchaya_data»).

Добавление нескольких дней к текущей дате

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

Создайте поле тип Текстовое поле. Это поле отвечает за отображение текущей даты (или любой, которую введёт пользователь). В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код:

Где «d.m.o» – формат даты в виде «день.месяц.год» (формат можно менять). Пользователь сможет сменить эту дату.

Создайте ещё одно поле тип Текстовое поле. Это поле предназначено для ввода второй даты. В его настройках на вкладке Основное в поле Значение по умолчанию введите следующий код (дата может быть любой):

Создайте поле тип Скрытое поле. Оно необходимо для сохранения значения вычисления.

Перейдите в свойства формы в раздел PHP скрипты и в область Скрипт, вызываемый при обработке формы, вставьте следующий код:

Где «tekushchaya_data» – название первого поля, «predstoyashchaya_data» – название второго поля, «skrytoe» – название Вашего скрытого поля.

Вычисление количества дней между двух дат

Форма в модальном\всплывающем окне (lightbox)

Рассмотрим добавление кнопки\ссылки, по нажатию на которую будет происходить открытие формы во всплывающем окне. То есть, создадим всплывающую форму Joomla 3. По большому счёту, это можно легко и быстро реализовать при помощи модуля «RSForm! Pro Feedback Module» или при помощи плагина Modals, но мы рассмотрим альтернативный вариант.

Предполагается, что форма у Вас уже создана.

Шаг №1. В зависимости от шаблона сайта может понадобиться добавить ниже указанный код в файл «index.php» в корне папки Вашего шаблона сайта (не админки) в секцию «».

Шаг №2. Перейдите туда, где Вы хотите вставить ссылку на открытие формы. Это может быть материал, модуль и т.д. Вам нужно вставить вот такую HTML-конструкцию. Обратите внимание, что может понадобиться отключить редактор материалов Joomla и воспользоваться редактором типа «Редактор - Без редактора» (это можно сделать в менеджере плагинов). Иначе, например, TinyMCE урежет код.

В ссылке «index.php?option=com_rsform&formId=33&tmpl=component» число «33» – это ID Вашей формы, которую нужно открывать. Значения «x: 400, y: 180» – ширина и высота всплывающего окна в пикселях. «Открыть форму» – текст ссылки.

Чтобы сделать ссылку кнопкой, нужно добавить соответствующий класс. В моём случае это «rspbld-button btn btn-info». Данный класс зависит от того, какой у Вас шаблон и как в нём называется CSS-класс для описания кнопок. Код будет выглядеть так:

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

Всплывающая форма Joomla 3

Где «3500» – время задержки перед закрытием окна (в миллисекундах). Обратите внимание, что стоит использовать редактор «Редактор - Без редактора», чтобы не обрезался код.

Форма регистрации

Если Вам нужно создать расширенную форму регистрации Joomla 3, например, для сбора дополнительных данных о посетителях сайта, то RSForm Pro поможет Вам в этом.

Шаг №1. Установите и опубликуйте системный плагин «RSForm! Pro Registration Form». В моём примере его версия 1.52.1.

Шаг №2. В Пользователи – Менеджер пользователей – Настройки проверьте, чтобы для опции Разрешить регистрацию пользователей на вкладке Параметры пользователя, было выбрано Да. Если у Вас на сайте установлен какой-то компонент, который может переопределять страницу регистрации, например, Community Builder, то позаботьтесь, чтобы это не происходило.

По умолчанию, сразу после установки плагина «RSForm! Pro Registration Form» происходит подмена формы регистрации Joomla на форму RSForm Pro. Причём, форма регистрации создаётся автоматически (заголовок «RSForm! Pro Registration Form»). Вы можете отредактировать её или сменить на свою. Это можно сделать в настройках RSForm на вкладке Форма регистрации. Там же можно указать URL-адрес, на который будет перенаправлен пользователь, по нажатию на ссылку регистрации (рисунок ниже).

Настройка формы регистрации

Настройка формы регистрации Joomla 3

Шаг №4. Дополните свою форму дополнительными полями. Например, полями «Телефон» и «Тип учётной записи».

Поле «Телефон» – служит для сбора номеров телефонов и реализуется без особых сложностей при помощи поля тип Текстовое поле. В принципе, можно настроить правило проверки, которое позволит вводить номера в любом формате даже со специальными символами типа «(, ), -». Об этом можно прочесть в статье «Инструкция RSForm Pro (часть 3). Формы Joomla 3».

А вот поле «Тип учётной записи» позволит закрепить пользователя за той или иной группой пользователей Joomla в зависимости от того, что выберет пользователь. У этого поля будет тип Выпадающий список, и там будет два значения: «Автор» и «Читатель». Это можно использовать, например, для возможности авторов добавлять материалы на сайт из фронтальной части, а читателям – писать комментарии без ввода капчи.

Шаг №5. Создайте поле тип Выпадающий список и в его настройках, в поле Элементы, введите такие значения (рисунок ниже).

Тип учётной записи

Обратите внимание, что цифры «2» и «3» соответствуют ID определённым группам пользователей в Пользователи – Группы (рисунок ниже).

Группы пользователей Joomla

Вставьте следующий код в свойства формы в раздел PHP скрипты в область Скрипт, вызываемый после обработки формы:

Где, «tip-uchjotnoj-zapisi» – название поля с выпадающим списком.

На рисунке ниже показан вид формы в админке.

Форма регистрации в админке

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

Форма регистрации Joomla 3

Форма обратной связи

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

Шаг №1. Перейдите в Компоненты – Контакты и создайте несколько контактов с указанием их e-mail адресов, имён и должностей. E-mail адреса можно отдельно не указывать, если Вы связали контакт пользователя с существующим на сайте учётной записью (рисунок ниже).

Контакты

Шаг №2. Перейдите в Компоненты – RSForm! Pro – Управление формами и создайте нужную Вам форму обратной связи.

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

В свойствах формы в разделе E-mail администраторов у Вас не должны быть указаны адреса отправителей и получателей. В свойствах формы в разделе PHP E-mail скрипты, в раздел Скрипт, вызываемый до отправки письма администратору вставьте следующий код:

Где «pochta@vashego.sajta» нужно заменить на e-mail Вашего сайта. С него будут отправляться письма.

На рисунке ниже показан пример формы в админке.

Форма обратной связи в админке

На рисунке ниже показан пример формы на сайте.

Форма обратной связи Joomla 3

Как видите, в поле выпадающего списка значения подтянулись автоматически. Как альтернативу, можете рассмотреть бесплатные модули форм обратной связи RSContact и DJ-EasyContact.

Видео-инструкция по RSForm Pro

В данном видео показаны некоторые моменты, описанные в статье выше.

Отключение суббот и воскресений в календаре – с 00:00.
Запрет выбора конкретных дат в календаре – с 01:29.
Вычисление разницы в днях между двумя полями календаря – с 02:53.
Работа с полем Выбор даты и времени – с 05:54.
Вычисление количества дней между двух дат – с 08:22.
Форма в модальном\всплывающем окне (lightbox) – с 10:44.
Форма регистрации – с 16:04.
Форма обратной связи – с 21:04.

В следующей статье «Инструкция по Joomla RSForm Pro (часть 6)» мы поговорим об ограничениях на ввод данных в поля формы и о возможностях получения URL-адресов страниц.

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

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

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