in English

Модальный

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

На этой странице

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

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

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

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</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">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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 и HTMLdata-bs-* , чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата.

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

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-* attributes
  var recipient = button.getAttribute('data-bs-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
})

Переключение между модальными окнами

Переключайтесь между несколькими модальными окнами с умным размещением атрибутов data-bs-targetи . data-bs-toggleНапример, вы можете переключить модальное окно сброса пароля из уже открытого модального окна входа. Обратите внимание, что несколько модальных окон не могут быть открыты одновременно — этот метод просто переключает между двумя отдельными модальными окнами.

Открыть первое модальное окно

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Изменить анимацию

Переменная $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-describedbyon .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`
`.modal-fullscreen-xxl-down`	Ниже`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Сасс

Переменные

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Петля

Отзывчивые полноэкранные модальные окна генерируются с помощью $breakpointsкарты и цикла в файлах scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Применение

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

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

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

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

Через JavaScript

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

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

Опции

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

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

Методы

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

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

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

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

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

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

переключать

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

myModal.toggle()

показывать

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

myModal.show()

Кроме того, вы можете передать элемент DOM в качестве аргумента, который можно получить в модальных событиях (как relatedTargetсвойство).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

Спрятать

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

myModal.hide()

обработать обновление

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

myModal.handleUpdate()

распоряжаться

Уничтожает модальное окно элемента. (Удаляет сохраненные данные в элементе DOM)

myModal.dispose()

получить экземпляр

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

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

getOrCreateInstance

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

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(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`и щелчок за пределами модального окна или нажатие клавиши Escape выполняется с параметром клавиатуры или `data-bs-keyboard`установлено значение `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})