Перейти до основного вмісту Перейти до навігації документами
in English

Модальний

Використовуйте модальний плагін JavaScript від Bootstrap, щоб додати на свій сайт діалогові вікна для лайтбоксів, сповіщень користувачів або повністю спеціального вмісту.

На цій сторінці

Як це працює

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

  • Модальні створюються за допомогою HTML, CSS і JavaScript. Вони розташовані над усім іншим у документі та видаляють прокручування, <body>щоб натомість прокручувався модальний вміст.
  • Натискання модального «задника» автоматично закриє модаль.
  • Bootstrap підтримує лише одне модальне вікно за раз. Вкладені режими не підтримуються, оскільки ми вважаємо, що вони не сприяють взаємодії з користувачем.
  • Модальні використовують position: fixed, що іноді може бути дещо специфічним щодо його рендерингу. За можливості розміщуйте свій модальний HTML у позиції верхнього рівня, щоб уникнути потенційних перешкод з боку інших елементів. Ймовірно, ви зіткнетеся з проблемами під час вкладення .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>

Змінний модальний зміст

У вас є купа кнопок, які запускають один і той самий режим із дещо різним вмістом? Використовуйте атрибути HTMLevent.relatedTarget і , щоб змінювати вміст модального елемента залежно від того, яку кнопку було натиснуто.data-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">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">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, щоб автоматично зупиняти відтворення тощо. Щоб дізнатися більше, перегляньте цю корисну публікацію 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>

Модальний на весь екран

Ще одна перевизначення — це можливість спливаючого вікна, яке охоплює вікно перегляду користувача, доступне через класи модифікаторів, розміщені на .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>

Відхилити

Відхилення можна досягти за допомогою dataатрибута на кнопці в модалі , як показано нижче:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

або на кнопці за межами модального , використовуючи, data-bs-targetяк показано нижче:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Хоча підтримуються обидва способи відхилення модалу, майте на увазі, що відхилення поза модалом не відповідає шаблону дизайну модального діалогового вікна WAI-ARIA . Робіть це на свій страх і ризик.

Через JavaScript

Створіть модаль за допомогою одного рядка JavaScript:

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

Опції

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

Ім'я Тип За замовчуванням опис
backdrop логічний або рядок'static' true Включає елемент модального фону. Крім того, вкажіть staticдля фону, який не закриває модаль після натискання.
keyboard логічний true Закриває модаль, коли натиснуто клавішу виходу
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()

handleUpdate

Вручну відрегулюйте позицію модалу, якщо висота модалу змінюється, коли він відкритий (тобто, якщо з’являється смуга прокручування).

myModal.handleUpdate()

розпоряджатися

Знищує модальний елемент елемента. (Видаляє збережені дані в елементі DOM)

myModal.dispose()

getInstance

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