Как создать модальное окно в 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>

А теперь несколько моментов:

1.   Чтобы вставить код, переключите редактор в режим html
2.   Вы можете убрать из окна ненужные вам элементы: кнопки, шапку окна и т.д.
3.   В содержимом вы можете вставить всё что угодно: текст с картинками и видео, модули и т.д.
4.   Можно изменять стили модального окна (размер, позицию, цветность) через CSS. Для этого нужно добавить в div окна style=" ", где прописать нужные стили;

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

  Если же у вас возникли проблемы, то пишите о них в комментариях ниже.

Комментарии  

# Елена 07.08.2018 18:00

Здравствуйте.
Joomla! 3.8.3 шаблон Protostar http://uchilka.01sh.ru/ru/
В статье необходимо разместить модуль подписки, чтобы читатель при желании мог подписаться на продолжение.
Реализация модулем «Newsletter Subscriber»
Вставляю в тело статьи
подписаться на продолжение


{loadmodule mod_newsletter_subscriber,подписка}


И работает хорошо при условии, что выключен модуль того же автора «Rapid Contact» который используется для заказа обратного звонка.
Вставляю код модального окна в модуль HTML-код


{loadmodule mod_rapid_contact,перезвон}


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

Ответить | Ответить с цитатой | Цитировать

# Inter-Net PRO 07.08.2018 21:03

Если я правильно понял, у обоих окон и ссылок на них прописан один и тот же id.
#exampleModal

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

Ответить | Ответить с цитатой | Цитировать

# Елена 07.08.2018 21:58

Спасибо за участие.
Вы объяснили коротко, при этом понятно.
Всё работает отлично. Так и было - одинаковы id

Ответить | Ответить с цитатой | Цитировать

Обновить список комментариев

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