Как сделать всплывающее окно на сайте joomla

Содержание
  1. Модальное окно joomla без всяких заморочек
  2. Модальное окно joomla без плагинов
  3. Модальное окно joomla с помощью плагина modals
  4. Модальное окно joomla с помощью bootstrap
  5. Как сделать всплывающее окно на сайте joomla 3 с помощью плагина или вставки кода?
  6. Создание всплывающего окна на сайте joomla со вставкой видео из Youtube
  7. Создание всплывающего окна с помощью стороннего скрипта
  8. Создание галереи изображений на странице материала или в модуле плагином SigPlus
  9. Модальные окна на сайте Joomla с помощью плагина RokBox
  10. Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).
  11. 1) Подключение JQuery и Facebox.
  12. 2) Создание позиции для модуля.
  13. 3) Создание модуля.
  14. 4) Создание кнопки/ссылки.
  15. Модуль Wedal Joomla Callback – Всплывающая Форма Обратной Связи
  16. Зачем нужен еще один модуль обратной связи?
  17. Особенности Wedal Joomla Callback
  18. 1. Только модуль и ничего кроме модуля
  19. 2. Модуль работает полностью на AJAX
  20. 3. На странице может быть неограниченное количество разных форм с разным оформлением и только один JS и один CSS файл
  21. 4. Каждая форма, кнопка, письмо могут иметь уникальную структуру и оформление
  22. 5. Защита от спама и CSRF-атак
  23. 6. Простота
  24. 7. Всплывающая или встраеваемая в страницу форма ( v 1.1.1 )
  25. 8. Блок «Политика обработки персональных данных» ( v 1.1.2 )
  26. 9. Маска ввода номера телефона, которую можно задать самостоятельно в настройках ( v 1.2.0 )
  27. Настройки Wedal Joomla Callback
  28. Распространение модуля Wedal Joomla Callback
  29. Скачать Wedal Joomla Callback
  30. Полезные кейсы по модулю
  31. Список изменений
  32. Другие статьи серии
  33. Добавить комментарий
  34. Комментарии

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

Изменен: 23 января, 2021

Модальное окно 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.

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

Источник

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

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

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

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

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

Читайте также:  Как сделать самому обогрев боковых зеркал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После тонкой настройки плагина, нам остается только в нужном месте материала или модуля вставить одну из следующих команд с демо страницы самого плагина вот тут: http://demo.rockettheme.com/joomla-extensions/rokbox/

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

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

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

Источник

Авторизация для Joomla-сайта во всплывающем окне (Кейс #2).

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

Читайте также:  Как сделать рекавери на телефоне micromax

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

1) Подключение JQuery и Facebox.

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

JQuery в вашем шаблоне может быть уже подключен. Если вы используете Joomla 3, то скорее всего подключен. Как узнать наверняка? Откройте главную страницу сайта, кликните по ней правой кнопкой мыши и выберите код «Просмотр исходного кода»(в разных браузерах этот пункт называется по-разному, но смысл такой же). В открывшимся окне html-кода страницы нажмите «ctrl + F» и введите в строке поиска «jquery». Если текст будет найдет, то библиотека JQuery подключена. Если же нет, значит нет и нужно ее подключить.

Скрипт Facebox нужно скачать по этой ссылке. После скачивания извлеките архив. Из него нам понадобится только папка src. Переименуйте ее в facebox и закачайте на сайт в папку templates/ваш_шаблон/

Подключить JQuery и Facebox можно добавив в файле index.php вашего шаблона между тегами следующий код:

Если JQuery уже подключен:

Если JQuery еще не подключен:

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

Еще одна деталь – в файле templates/ваш_шаблон/facebox/facebox.js в строках 88, 89, 96 нужно указать правильные пути к картинкам. Это будет:

/templates/ваш_шаблон/facebox/loading.gif и остальные по аналогии.

2) Создание позиции для модуля.

Теперь, когда скрипт подключен, нам нужно создать специальную скрытую позицию для модуля авторизации. Для этого открываем файл templates/ваш_шаблон/index.php, находим в нем закрывающий тег и перед ним добавляем:

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

3) Создание модуля.

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

4) Создание кнопки/ссылки.

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

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

4.1) Добавить в templates/ваш_шаблон/index.php, сразу после открывающего тега :

4.2) В файле templates/ваш_шаблон/facebox/facebox.css добавить в конец:

Вот и все. Если вы нигде не ошиблись, то справа экрана появится вот такая кнопка, открывающая всплывающее окно:

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

Источник

Модуль Wedal Joomla Callback – Всплывающая Форма Обратной Связи

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

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

Wedal Joomla Callback воплощает многие идеи, которые были у меня в голове, но не могли быть сформулированы в коде. Читайте описание. Думаю, что вам понравится!

Зачем нужен еще один модуль обратной связи?

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

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

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

Wedal Joomla Callback я делал в первую очередь для себя, для удобства работы. Но решил, что будет здорово поделиться модулем с сообществом.

Особенности Wedal Joomla Callback

В чем особенность данного модуля?

1. Только модуль и ничего кроме модуля

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

2. Модуль работает полностью на AJAX

Он не загружается вместе со страницей. Загружается только кнопка вызова формы с таким кодом:

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

При клике по кнопке форма подгружается в реальном времени.

После отправки формы страница не перезагружается.

В Joomla это похоже на магию. Кто в теме, тот поймет =)

3. На странице может быть неограниченное количество разных форм с разным оформлением и только один JS и один CSS файл

Вы можете создать несколько копий модуля на одной странице с разными настройками. И да, они будут работать. При этом все формы будет обрабатывать общий JS-файл, который загрузится в единственном экземпляре.

Читайте также:  Гель лак как сделать чтоб стразы держались

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

4. Каждая форма, кнопка, письмо могут иметь уникальную структуру и оформление

Wedal Joomla Callback поддерживает альтернативные макеты для:

Да, всего один модуль и неограниченное количество разных форм.

5. Защита от спама и CSRF-атак

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

Кроме того, в модуле внедрена проверка токена, которая не позволит совершать CSRF-атаки.

6. Простота

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

7. Всплывающая или встраеваемая в страницу форма ( v 1.1.1 )

В обновленной версии модуля 1.1.1 добавлена возможность показывать не только всплывающую форму, но и встраивать форму в страницу сайта. На одной странице может быть несколько всплывающих форм и несколько встроенных. И всё это будет работать!

8. Блок «Политика обработки персональных данных» ( v 1.1.2 )

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

9. Маска ввода номера телефона, которую можно задать самостоятельно в настройках ( v 1.2.0 )

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

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

Настройки Wedal Joomla Callback

Все настройки Wedal Joomla Callback вы можете видеть на рисунке:

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

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

Несколько модулей на одной странице:

И конечно, вы можете вставить один или несколько модулей обратной связи в любую статью, и это тоже будет работать!

Распространение модуля Wedal Joomla Callback

Модуль всплывающей формы обратной связи Wedal Joomla Callback распространяется по лицензии GPL. Это означает, что вы можете бесплатно скачивать и использовать его на любых сайтах.

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

Скачать Wedal Joomla Callback

Wedal Joomla Callback имеет свой репозиторий на Github и поддерживает обновления прямо оттуда.

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

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

Полезные кейсы по модулю

Список изменений

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

Другие статьи серии

Добавить комментарий

Комментарии

Модуль, безусловно, прекрасен, но. согласно требованиям ФЗ-152 «О персональных данных» в форме обратной связи должен присутствовать, как минимум, чекбокс «Я ознакомился/ознакомилась с Политикой конфиденциальности», а как максимум, ещё следует добавить чекбокс «Я согласен/согласна на обработку моих персональных данных» и ссылка на «Пользовательское соглашение».

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

Вообще, у меня двоякое отношение к этому закону. Почему? Я думаю, эти надписи негативно будут влиять на конверсию форм. Это нам с вами понятно, что ничего особенно не меняется, только добавляется уведомление. А простые люди, уже и так ужасно уставшие от бесконечных звонков и СМС-спама, могут истолковать такую приписку совершенно иначе. Что-то вроде «Отправляя форму, вы даете согласие на то, что мы будем надоедать вам звонками и присылать смс-ки по ночам». Если человек представит толкование надписи примерно в таком виде, то, вероятно, он просто закроет форму и уйдет с сайта.

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

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

Источник

Оцените статью
Как сделать своими руками
Adblock
detector