Как создать модальное  окно в 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 макету модального окна вам понятно что где находится и вы сможете без проблем отредактировать окно под свои нужды.

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

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