Посмотреть на GitHub Оригинал

Modal

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

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

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

  • Модальные окна созданы с использованием HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из <body>, так что вместо этого прокручивается модальное содержимое.
  • Клик по «подложке» модального окна автоматически закрывает модальный.
  • Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
  • В модальных окнах используется position: fixed, что иногда может быть немного специфичным в отношении рендеринга. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
  • Еще раз, из-за position: fixed, есть некоторые предостережения при использовании модальных окон на мобильных устройствах. Смотрите нашу документацию по поддержке браузеров для получения дополнительной информации.
  • Из-за того, как HTML5 определяет свою семантику, HTML атрибут autofocus не влияет на Модальные окна Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion. См. Раздел с уменьшенным движением в нашей документации по специальным возможностям.

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

Примеры

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

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

Заголовок модального окна

Здесь основной текст модального окна

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="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>Здесь основной текст модального окна</p>
      </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>

Живая демонстрация

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

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

<!-- Модальное окно -->
<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="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">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

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

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

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

<!-- Модальное окно -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">Закрыть</button>
        <button type="button" class="btn btn-primary">Понял</button>
      </div>
    </div>
  </div>
</div>

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

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

Вы также можете создать модальное окно с возможностью прокрутки, которое позволяет прокручивать тело модального окна, добавив .modal-dialog-scrollable к .modal-dialog.

<!-- Прокручиваемое модальное окно -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

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

Добавьте .modal-dialog-centered к .modal-dialog для вертикального выравнивания модального окна.

<!-- Вертикально выравненное модальное окно -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Вертикально выравненное прокручиваемое модальное окно -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Уровень 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Уровень 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Уровень 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Изменяющееся модальное содержимое

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

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Открыть модальное окно для @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Открыть модальное окно для @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Открыть модальное окно для @getbootstrap</button>

<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="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="col-form-label">Получатель:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Сообщение:</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">Закрыть</button>
        <button type="button" class="btn btn-primary">Отправить сообщение</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Кнопка, запускающая модальное окно
  var recipient = button.data('whatever') // Извлечь информацию из атрибутов data- *
  // При необходимости Вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
  // Обновите содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого Вы можете использовать библиотеку привязки данных или другие методы.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Изменение анимации

Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед модальной плавной анимацией, переменная $modal-show-transform определяет преобразование .modal-dialog в конец модальной плавной анимации.

Если Вам нужна, например, анимация с увеличением, Вы можете установить $modal-fade-transform: scale(.8).

Удаление анимации

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

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

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

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

Доступность

Не забудьте добавить aria-labelledby="...", ссылаясь на Заголовок модального окна, в .modal. Кроме того, Вы можете дать описание Вашего модального диалога с помощью aria-describedby в .modal. Обратите внимание, что Вам не нужно добавлять role="dialog", поскольку мы уже добавляем его через JavaScript.

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

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

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

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

Размер Класс Максимальная ширина модального окна
Маленькое .modal-sm 300px
По умолчанию Никакой 500px
Большое .modal-lg 800px
Очень большое .modal-xl 1140px

Наш модальный класс по умолчанию без модификаторов представляет собой модальное окно «среднего» размера.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</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">Запустить модальное окно</button>

Через JavaScript

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

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

Параметры

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

Имя Тип По умолчанию Описание
backdrop boolean or the string 'static' true Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при нажатии.
keyboard boolean true Закрывает модальное окно при нажатии клавиши выхода (Esc)
focus boolean true При инициализации фокусируется на модальном окне.
show boolean true Показывает модальное окно при инициализации.

Методы

Асинхронные методы и переходы

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

Дополнительную информацию см. в нашей документации по JavaScript.

.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')

.modal('handleUpdate')

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

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

.modal('dispose')

Уничтожает элемент модальное окно.

События

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

Тип события Описание
show.bs.modal Это событие запускается немедленно при вызове метода экземпляра show. Если он вызван кликом, выбранный элемент доступен как свойство события relatedTarget.
shown.bs.modal Это событие запускается, когда модальное окно становится видимым для пользователя (будет ожидать завершения переходов CSS). Если он вызван кликом, выбранный элемент доступен как свойство события relatedTarget.
hide.bs.modal Это событие запускается сразу после вызова метода экземпляра hide.
hidden.bs.modal Это событие запускается, когда модальное окно перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
hidePrevented.bs.modal Это событие запускается, когда отображается модальное окно, его фон является static, и выполняется щелчок за пределами модального окна или нажатие клавиши escape с параметром клавиатуры или установленным параметром data-keyboard на false. 
$('#myModal').on('hidden.bs.modal', function (event) {
  // сделайте что-нибудь...
})