2. Главная
  3. Web
  4. Joomla

Модальные окна средствами Joomla

Joomla

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

Как работает

Прежде всего требуется отметить, что в Joomla 4.0 используется Bootstrap 5, который несколько отличается от Bootstrap 4 их предыдущих версий Joomla, поэтому здесь приводятся примеры для Bootstrap 5, иначе они будут не рабочие.

Дополнительно несколько общих замечаний от создателей Bootstrap:

  • Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх документа и удаляют его прокрутку, для того чтобы вместо этого прокручивалось содержимое модального окна.
  • Клик по модальному "фону" автоматически закрывает модальное окно.
  • В Bootstrap поддерживается только одно открытое модальное окно. Вложенные модальные окна не поддерживаются, так как считается, что они неудобны для пользователей.
  • Модальные окна используют position: fixed, что иногда может быть несколько неудобно для их вывода. Необходимо размещать модальный HTML на верхнем уровне, чтобы минимизировать возможные помехи от других элементов. Особенно вероятны проблемы при вложении .modal в другой фиксированный элемент.
  • И еще, из-за position: fixed есть некоторые ограничения при использовании модальных окон на мобильных устройствах.
  • Из-за того, как HTML5 определяет свою семантику, HTML-атрибут autofocus не действует в модальных окнах Bootstrap. Чтобы добиться этого эффекта, необходимо воспользоваться JavaScript:

Примеры

Всплывающее окно с заголовком и подвалом

Включите работающее демо модального окна, нажав кнопку. Оно будет выскальзывать сверху страницы, а при закрытии убираться обратно.

Код этого окна:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Запустить демо
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Заголовок модального окна</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        ...(какой-то текст или ссылка на картинку)
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить</button>
      </div>
    </div>
  </div>
</div>

Статическое окно

Когда установлен атрибут data-bs-backdrop="static" окно не закрывается, если кликать мимо него. Пробуйте следующий пример.

Код этого окна:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Запустить статическое окно
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Заголовок</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        ...(какой-то текст или ссылка на картинку)
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Понял</button>
      </div>
    </div>
  </div>
</div>

Скроллинг длинного содержимого

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

Код этого окна:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
  Запустить пример
</button>

<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Заголовок</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body" style="min-height: 1500px">
        <p>Это такой пример демонстрации как контент, который не вмещается в экран пользователя получает прокуртку. В данном примере установлена большая минимальная высота окна. Прокрутка появится также и в том случае, если текста будет слишком много, или будет слишком большая картинка.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Другая кнопка</button>
      </div>
    </div>
  </div>
</div>

Прокрутки можно добиться, если добавить атрибут .modal-dialog-scrollable к атрибуту .modal-dialog.

Код:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
  Запустить пример
</button>

<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Заголовок</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <p>Это еще один пример прокручивающегося окна. После текста много раз вставлен код перевода строки <code>&ltbr&gt</code> для демонстрации как поведет себя окно при превышении максимальной возможной высоты. Сейчас создается внутренняя полоса прокрутки, непосредственно у окна. Когда достигается максимальная установленная высота, контент обрезается и появляется прокрутка внутри модального окна.</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p>Эта строка появиться, когда вы до нее докрутите.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Другая кнопка</button>
      </div>
    </div>
  </div>
</div>

Вертикальное центрирование окна

Для центрирования по вертикали всплывающего окна, просто добавляем атрибут .modal-dialog-centered в class="modal-dialog"

Код:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
    Вертикально центрированное окно
</button>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Заголовок</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <p>Это окно центрировано по вертикали.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Вторая кнопка</button>
      </div>
    </div>
  </div>
</div>

В заключение хотелось бы пояснить для начинающих (а это для начинающих, потому что продвинутые это и так знают), что id у каждого всплывающего окна должен быть уникальным в пределах страницы. Кнопка ссылается на этот id через data-bs-target="", где он указывается в кавычках с добавлением значка "#" перед ним. При этом кнопка может находиться в начале страницы, а код модального окна - в конце.

Дополнительно подчеркнем, что код работает в Joomla 4.0 на встроенном изначально Bootstrap. Можно просто копировать примеры кода и, выключив редактор, вставлять к себе в статью, поменяв текст.

Примеры по использованию встроенных возможностей, надеемся продолжить.

 

Могут заинтересовать