Модальные окна

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

Содержание

Содержание
Как это работает
Примеры
Дополнительные размеры
Применение

Как это работает

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

Модальные окна построены с использованием HTML, CSS и JavaScript. Они расположены поверх всего остального в документе и удаляют прокрутку из <body>, чтобы прокручивать модальный контент.
Щелчок по модальному «фону» автоматически закроет модальное окно.
Bootstrap поддерживает только одно модальное окно за раз. Вложенные модали не поддерживаются, поскольку мы считаем их неудовлетворительными.
Модальные окна используют position: fixed, что иногда может быть немного специфично для его рендеринга. По возможности размещайте свой модальный HTML в верхнем уровне, чтобы избежать возможных помех от других элементов. Вероятно, у вас возникнут проблемы при вложении .modal в другой фиксированный элемент.
И снова, благодаря position: fixed, есть некоторые оговорки с использованием модальных окон на мобильных устройствах. Подробнее см. в нашей документации поддержки браузера.
Наконец, HTML атрибут autofocus не влияет на модальные окна. Вот как вы можете добиться такого же эффекта с помощью пользовательского JavaScript.

Продолжайте читать для демонстраций и руководств по использованию.

Из-за того, как HTML5 определяет его семантику, the autofocus HTML attribute не имеет никакого эффекта в модальных окнах Bootstrap. Чтобы добиться такого же эффекта, используйте некоторый настраиваемый JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Примеры

Ниже представлен пример статического модального окна (это означает, что его position и display были переопределены). Включаются модальный заголовок, модальный текст (обязательный для padding), и модальный нижний колонтитул (необязательно). Мы просим вас включать модальные заголовки с отклонением, когда это возможно, или предоставить другое явное действие по отклонению.

<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Живое демо

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Прокрутка длинного содержимого

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <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">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

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

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Использование сетки

Используйте сетку Bootstrap в модальном окне путм вложения .container-fluid в .modal-body. Затем используйте обычные системные классы сетки, как и в любом другом месте.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
      <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Есть куча кнопок, которые запускают одно и то же модыльное окно с немного различающимся содержимым? Используйте атрибуты event.relatedTarget и HTML data-* attributes (возможно via jQuery) чтобы варьировать содержимое модального окна в зависимости от того, какая кнопка была нажата.

Ниже приводится демонстрационная версия, сопровождаемая примером HTML и JavaScript. Для получения дополнительной информации ознакомьтесь с документацией по модальным окнам для получения подробной информации о relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Удалить анимацию

Для модальных окон, которые просто появляются, а не исчезают для просмотра, удалите класс .fade из вашей модальной разметки.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамическая высота

Если высота модального окна изменяется, когда оно открыто, вы должны вызывать $('#myModal').data('bs.modal').handleUpdate() для корректировки положения модального окна в случае появления полосы прокрутки.

Доступность

Обязательно добавьте role="dialog" и aria-labelledby="...", ссылаясь на модальный заголовок, на .modal, и role="document" в сам .modal-dialog. Кроме того, вы можете дать описание вашего модального диалога с aria-describedby на .modal.

Встраивание видео на YouTube

Для встраивания видео YouTube в модальные окна требуется дополнительный JavaScript, а не в Bootstrap, чтобы автоматически остановить воспроизведение и многое другое. Дополнительную информацию см. в этой статье, посвященной Overflow.

Дополнительные размеры

Модали имеют два дополнительных размера, доступные через модификаторы классов, которые будут размещены на .modal-dialog. Эти размеры включаются в определенные точки останова, чтобы избежать горизонтальных полос прокрутки на более узких экранах.

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Применение

Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open к <body> для изменения поведения прокрутки по умолчанию и генерирует .modal-backdrop для предоставления области щелчка для отклонения показанных модальных окон при нажатии вне модального окна.

Через атрибуты данных

Активируйте модальные окна без написания JavaScript. Установите data-toggle="modal" в контроллере элемента, такого как кнопка, рядом с data-target="#foo" или href="#foo" чтобы нацелить определенную модаль для переключения.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

Вызывайте модаль с помощью id myModal с лаконичной записью на JavaScript:

$('#myModal').modal(options)

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. В случае передачи через атрибуты данных, добавьте приставку с названием параметра data-, как в примере: data-backdrop="".

Название	Тип	По умолчанию	Описание
backdrop	логический или строковый `'static'`	true	Включает элемент modal-backdrop. Можно также указать `static` для фона, который не закрывает модальное окно при клике.
keyboard	логический	true	Закрытие модального окна при клике на клавишу escape.
focus	логический	true	Устанавливает фокус на модальном окне при инициализации.
show	логический	true	Показывает модаль при инициализации.

Методы

`.modal(options)`

Активизирует содержимое как модальное. Принимает необязательный параметр с типом данных object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

Ручное переключение модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')

`.modal('show')`

Ручное отображение модали. Возвращается к инициатору перед фактическим показом модали (то есть, перед запуском события shown.bs.modal).

$('#myModal').modal('show')

`.modal('hide')`

Ручное сокрытие модали. Возвращается к инициатору перед сокрытием модали (то есть, перед запуском события hidden.bs.modal).

$('#myModal').modal('hide')

События

Класс модали в Bootstrap предоставляет несколько событий, чтобы обеспечить функциональность модали. Все модальные события возбуждаются в самом модальном режиме (т.е. в <div class="modal">).

Тип События	Описание
show.bs.modal	Это событие срабатывает во время вызова метода `show`. Если вызов происходит за клик, то элемент, на котором был этот клик, доступен как свойство события `relatedTarget`.
shown.bs.modal	Это событие вызывается, когда модальное окно становится видимым для пользователя (будет ждать завершения CSS-переходов). Если вызвано щелчком, элемент, на котором был клик, доступен как свойство события `relatedTarget`.
hide.bs.modal	Это событие вызывается немедленно при вызове метода `hide`.
hidden.bs.modal	Это событие вызывается, когда модаль завершит скрытие от пользователя (будет ждать завершения переходов CSS).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Компоненты

Модальные окна

Содержание

Как это работает

Примеры

Живое демо

Прокрутка длинного содержимого

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

Использование сетки

Удалить анимацию

Динамическая высота

Доступность

Встраивание видео на YouTube

Дополнительные размеры

Применение

Через атрибуты данных

Через JavaScript

Параметры

Методы

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

События

Комментарии

Поддержать проект

Компоненты

Модальные окна

Содержание

Как это работает

Примеры

Модальные компоненты

Modal title

Живое демо

Прокрутка длинного содержимого

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

Использование сетки

Изменение модального контента

Удалить анимацию

Динамическая высота

Доступность

Встраивание видео на YouTube

Дополнительные размеры

Применение

Через атрибуты данных

Через JavaScript

Параметры

Методы

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

События

Комментарии

Поддержать проект

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`