Модальное окно в Joomla

Как создать модальное окно в Joomla

Знаете ли вы, что в шаблонах Joomla свёрстаных на Bootstrap есть возможность встраивать и добавлять в любое место сайта всплывающие окна? Делается это очень просто, так как в шаблоне уже прописаны нужные для этого JavaScript и CSS, а вам всего лишь необходимо добавить в нужное место кнопку вызова всплывающего окна и макет окна. Ни каких дополнительных расширений - всё просто!

Всплывающее окно в Joomla

Если вы не знаете, то скажу что родной шаблон Aurora в Joomla 4 свёрстан на фреймворке Bootstrap 4, а шаблон Protostar в Joomla 3 свёрстан на Bootstrap 2.

Это значительно упрощает задачу реализации модального окна на сайте, так как разработчики бутстрапа уже позаботились о написании JavaScript и CSS-стилей для модальных окон.

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

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

Нажмите на кнопку с примером модального окна:

Создаём модальное окно на сайте

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

Для шаблонов на Bootstrap 4

HTML-код кнопки вызывающей модальное окно:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Запустить модальное окно
</button>

HTML-код модального окна:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Заголовок окна</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Содержимое...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить изменения</button>
            </div>
        </div>
    </div>
</div>

У кнопки есть атрибут data-target="#", а у модального окна есть айдишник id="". Каждый из них находятся в первой строчке кода своего элемента.

Нужно задать уникальное название для id модального окна и это название указать в атрибуте data-target кнопки, поставив в его начало символ #. Именно по этому значению кнопка находит модальное окно и открывает его.

Для шаблонов на Bootstrap 2

Код для вставки модального окна во втором бутстрапе очень похож, но есть небольшие отличия. Кнопку и окно я поместил одним кодом:

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

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

Записи по теме

JSitemap PRO - лучшая карта сайта для joomla

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

Sтильные опросы для Joomla

Как на сайте Joomla реализовать опрос или голосование при помощи компонента Sexy Polling. Красивые, стильные опросы с возможностью разных настроек.

Wordpress или Joomla - какой выбрать движок для сайта

Какой CMS движок выбрать для сайта Joomla или Wordpress. Что из них лучше. Какие сайты можно сделать на джумле и вордпрессе. Моё мнение по поводу популярности этих CMS.

Горизонтальное меню joomla

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

Если редактор JCE вырезает код JavaScript и PHP

Подробная инструкция о том, как правильно сделать настройки редактора JCE для Joomla, чтобы он не вырезал при сохранении записи вставленный в неё код JavaScript, PHP или CSS.

Извещения (письма) на почту в Kunena

Инструкция о том, где и как изменить стандартные письма извещения отсылаемые пользователям форумом Kunena. Настройте правильно уведомления на почту для вашего форума.

Комментарии 0

*** Авторизируйтесь чтобы писать комментарии.