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

Модальний

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

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

Як це працює

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

  • Модальні створюються за допомогою HTML, CSS і JavaScript. Вони розташовані над усім іншим у документі та видаляють прокручування, <body>щоб натомість прокручувався модальний вміст.
  • Натискання модального «задника» автоматично закриє модаль.
  • Bootstrap підтримує лише одне модальне вікно за раз. Вкладені режими не підтримуються, оскільки ми вважаємо, що вони не сприяють взаємодії з користувачем.
  • Модальні використовують position: fixed, що іноді може бути дещо специфічним щодо його рендерингу. За можливості розміщуйте свій модальний HTML у позиції верхнього рівня, щоб уникнути потенційних перешкод з боку інших елементів. Ймовірно, ви зіткнетеся з проблемами під час вкладення .modalв інший фіксований елемент.
  • Знову ж таки, через position: fixed, є деякі застереження щодо використання модалів на мобільних пристроях. Щоб отримати докладніші відомості, перегляньте наші документи підтримки браузера .
  • Через те, як HTML5 визначає свою семантику, атрибут autofocusHTML не впливає на моди Bootstrap. Щоб досягти такого ж ефекту, використовуйте власний JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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.

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Перемикання між модалями

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

Відкрийте першу модаль
html 
<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>

CSS

Змінні

Додано у v5.2.0

Як частина вдосконаленого підходу Bootstrap до змінних CSS, модальні тепер використовують локальні змінні CSS .modalдля .modal-backdropвдосконаленого налаштування в реальному часі. Значення для змінних CSS встановлюються через Sass, тому налаштування Sass все ще підтримується.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Змінні Sass

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

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

Використання

Модальний плагін перемикає ваш прихований вміст на вимогу за допомогою атрибутів даних або 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>
Хоча підтримуються обидва способи відхилення модалу, пам’ятайте, що відхилення поза модалом не відповідає діалоговому (модальному) шаблону Посібника з авторських практик авторства ARIA . Робіть це на свій страх і ризик.

Через JavaScript

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

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Опції

Оскільки параметри можна передати через атрибути даних або JavaScript, ви можете додати назву параметра до data-bs-, як у data-bs-animation="{value}". Обов’язково змініть тип регістру назви параметра з « camelCase » на « kebab-case » під час передачі параметрів через атрибути даних. Наприклад, використовуйте data-bs-custom-class="beautifier"замість data-bs-customClass="beautifier".

Починаючи з Bootstrap 5.2.0, усі компоненти підтримують експериментальний зарезервований атрибут даних data-bs-config, який може зберігати просту конфігурацію компонента як рядок JSON. Якщо елемент має атрибути data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", остаточне titleзначення буде таким, 456а окремі атрибути даних замінять значення, надані в data-bs-config. Крім того, наявні атрибути даних можуть містити такі значення JSON, як data-bs-delay='{"show":0,"hide":150}'.

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

методи

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

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

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

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

Активує ваш вміст як модальний. Приймає додаткові параметри object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
метод опис
dispose Знищує модальний елемент елемента. (Видаляє збережені дані в елементі DOM)
getInstance Статичний метод, який дозволяє отримати модальний екземпляр, пов’язаний з елементом DOM.
getOrCreateInstance Статичний метод, який дозволяє отримати модальний екземпляр, пов’язаний з елементом DOM, або створити новий, якщо він не був ініціалізований.
handleUpdate Вручну відрегулюйте позицію модалу, якщо висота модалу змінюється, коли він відкритий (тобто, якщо з’являється смуга прокручування).
hide Вручну приховує модаль. Повертається до абонента до того, як модаль буде фактично приховано (тобто до того , як відбудеться hidden.bs.modalподія).
show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Description
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal This event is fired when the modal is shown, its backdrop is static and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})