Как создать модальное окно в Joomla 3
Знаете ли вы, что в родном шаблоне Joomla с названием Protostar есть возможность встраивать и добавлять в любое место сайта всплывающие окна? Делается это очень просто, так как в шаблоне уже прописаны нужные для этого JavaScript и CSS, а вам всего лишь необходимо добавить в нужное место кнопку вызова всплывающего окна и макет окна. Ни каких дополнительных расширений - всё просто!
Всплывающее окно в Joomla 3
Если вы не знаете, то скажу что шаблон Protostar свёрстан на фреймворке Bootstrap 2, где разработчики уже позаботились о написании JavaScript и CSS-стилей для модальных окон.
Поэтому чтобы добавить всплывающее окно с каким либо содержимым,
Для начала приведу пример модального окна. Наполнять содержимым я его не буду, главное чтобы вы поняли что это такое и как этим пользоваться. Аналогично приведённому ниже примеру работают модальные окна на всех шаблонах на бутстрап-2. Если у вас шаблон на бутстрап 3 или 4, или на другом фреймворке, то тогда нужно смотреть документацию к ним, а данный метод не будет работать.
Нажмите на кнопку с примером модального окна:
Создаём модальное окно на сайте
Ниже вы можете увидеть код модального окна, состоящий из двух частей: кнопки вызова и самого модального окна.
Код для вставки модального окна:
<!-- Кнопка модального окна -->
<p><a href="#myModal" role="button" class="btn" data-toggle="modal">Открыть модальное окно</a></p>
<!-- Окно -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Заголовок окна</h3>
</div>
<div class="modal-body">
<p>Содержимое или текст модального окна…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Закрыть</button>
<button class="btn btn-primary">Сохранить</button>
</div>
</div>
А теперь несколько моментов:
- Чтобы вставить код, переключите редактор в режим html
- Вы можете убрать из окна ненужные вам элементы: кнопки, шапку окна и т.д.
- В содержимом вы можете вставить всё что угодно: текст с картинками и видео, модули и т.д.
- Можно изменять стили модального окна (размер, позицию, цветность) через CSS. Для этого нужно добавить в div окна style=" ", где прописать нужные стили;
Я надеюсь что по html макету модального окна вам понятно что где находится и вы сможете без проблем отредактировать окно под свои нужды.
Если же у вас возникли проблемы, то пишите о них в комментариях ниже.
Комментарии
Joomla! 3.8.3 шаблон Protostar http://uchilka.01sh.ru/ru/
В статье необходимо разместить модуль подписки, чтобы читатель при желании мог подписаться на продолжение.
Реализация модулем «Newsletter Subscriber»
Вставляю в тело статьи
подписаться на продолжение
{loadmodule mod_newsletter_subscriber,подписка}
И работает хорошо при условии, что выключен модуль того же автора «Rapid Contact» который используется для заказа обратного звонка.
Вставляю код модального окна в модуль HTML-код
{loadmodule mod_rapid_contact,перезвон}
Ищу помощи у Вас потому что: Оба модуля работают нормально при условии что один из них не в модальном окне. Если оба модуля вызываются кнопкой открывающей модальное окно отображается только один модуль в обоих окнах.
Самостоятельные попытки результата не принесли. Пожалуйста если есть решение — Подскажите.
Спасибо
#exampleModal
Задайте разные id для окон и в ссылках на кнопках, а то похоже что они у вас одинаковые для обоих окон.
Вы объяснили коротко, при этом понятно.
Всё работает отлично. Так и было - одинаковы id