Перейти к основному содержанию

Модальные окна (modal)

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

Содержание

Как это устроено

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

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () { 
  myInput.focus()
})
Эффект анимации этого компонента зависит от prefers-reduced-motionмедиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям .

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

Примеры

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

Modal title

Modal body text goes here.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <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-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="#exampleModal">
  Launch demo modal
</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">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="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<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">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">Understood</button>
      </div>
    </div>
  </div>
</div>

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

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

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

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

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

Добавить, .modal-dialog-centered, чтобы .modal-dialog центрировать модальное окно по вертикали.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<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">
        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-* чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата.

Ниже представлена ​​живая демонстрация, за которой следуют примеры 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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-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>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) { 
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-* attributes
  var recipient = button.getAttribute('data-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = 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.handleUpdate()чтобы скорректировать положение модального окна в случае появления полосы прокрутки.

Доступность

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

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

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

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

Модальные окна имеют три дополнительных размера, доступных через классы модификаторов, которые можно разместить в файле .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>

Полноэкранное модальное окно

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

Учебный класс Доступность
.modal-fullscreen Всегда
.modal-fullscreen-sm-down Ниже 576px
.modal-fullscreen-md-down Ниже 768px
.modal-fullscreen-lg-down Ниже 992px
.modal-fullscreen-xl-down Ниже 1200px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</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

Создайте модальное окно с одной строкой JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Параметры

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

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

Методы

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

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

См. нашу документацию по JavaScript для получения дополнительной информации .

Варианты прохождения

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), { 
  keyboard: false
})

toggle

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

myModal.toggle()

show (показать)

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

myModal.show()

hide (скрыть)

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

myModal.hide()

handleUpdate

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

myModal.handleUpdate()

dispose

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

myModal.dispose()

getInstance

Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM.

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

События

Модальный класс 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и выполняется щелчок за пределами модального окна или нажатие клавиши ESC с клавиатурой или для него data-keyboardустановлено значение false. 
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (e) { 
  // do something...
})