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

Инструкция как в Joomla сделать модальное (всплывающее) окно для шаблонов работающих на css-фреймворке Bootstrap (Aurora, Protostar и другие).

модальное окно

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

 

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

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

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

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

 

Записи по теме
JSitemap PRO - лучшая карта сайта для joomla
jsitemap pro Карта сайта - необходимый атрибут для каждого многостраничного сайта, при помощи которого поисковые системы получают информацию о всех страницах сайта, что повышает индексируемость страниц в поисковых системах.
Sтильные опросы для Joomla
опрос Как на сайте Joomla реализовать опрос или голосование при помощи компонента Sexy Polling. Красивые, стильные опросы с возможностью разных настроек.
Wordpress или Joomla - какой выбрать движок для сайта
wordpress joomla Какой CMS движок выбрать для сайта Joomla или Wordpress. Что из них лучше. Какие сайты можно сделать на джумле и вордпрессе. Моё мнение по поводу популярности этих CMS.
Горизонтальное меню joomla
меню Инструкция как быстро и просто сделать горизонтальное меню в Joomla 3 для шаблонов сайта работающих на фреймворке Bootstrap.
Если редактор JCE вырезает код JavaScript и PHP
код Подробная инструкция о том, как правильно сделать настройки редактора JCE для Joomla, чтобы он не вырезал при сохранении записи вставленный в неё код JavaScript, PHP или CSS.
Извещения (письма) на почту в Kunena
электронные письма Инструкция о том, где и как изменить стандартные письма извещения отсылаемые пользователям форумом Kunena. Настройте правильно уведомления на почту для вашего форума.

 

 

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

*** чтобы писать комментарии.