Source

Модальний

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

Як це працює

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

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

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

Продовжуйте читати демонстраційні ролики та інструкції з використання.

Приклади

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

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

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

Додайте .modal-dialog-centeredдо, .modal-dialogщоб вертикально відцентрувати модаль.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

Підказки та спливаючі підказки

Спливаючі підказки та спливаючі вікна можна розміщувати в межах модалів за потреби . Коли моди закрито, будь-які підказки та спливаючі елементи також автоматично відхиляються.

<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>

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

У вас є купа кнопок, які запускають один і той самий режим із дещо різним вмістом? Використовуйте атрибути HTML (можливо, event.relatedTargetчерез jQuery ), щоб змінювати вміст модального елемента залежно від того, яку кнопку було натиснуто.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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамічні висоти

Якщо висота модалу змінюється, коли він відкритий, вам слід викликати $('#myModal').modal('handleUpdate'), щоб відрегулювати положення модалу, якщо з’явиться смуга прокручування.

Доступність

Обов’язково додайте role="dialog"and aria-labelledby="...", посилаючись на модальний заголовок, до .modal, і role="document"до .modal-dialogсамого. Крім того, ви можете надати опис свого модального діалогу за допомогою aria-describedbyon .modal.

Вбудовування відео YouTube

Щоб вставляти відео YouTube у модальні режими, потрібен додатковий JavaScript не в Bootstrap, щоб автоматично зупиняти відтворення тощо. Щоб дізнатися більше, перегляньте цю корисну публікацію Stack Overflow .

Додаткові розміри

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

Розмір Клас Модальна максимальна ширина
Маленький .modal-sm 300px
За замовчуванням Жодного 500px
Великий .modal-lg 800px
Дуже великий .modal-xl 1140px

Наш стандартний модальний клас без модифікатора становить модальний «середній» розмір.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</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

Викличте модаль з ідентифікатором myModalза допомогою одного рядка JavaScript:

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

Опції

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

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

методи

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

Усі методи 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властивість події.
показаний.bs.modal Ця подія запускається, коли модаль стає видимою для користувача (чекатиме, поки завершаться переходи CSS). Якщо викликано клацанням, клацнутий елемент доступний як relatedTargetвластивість події.
hide.bs.modal Ця подія запускається негайно після hideвиклику методу екземпляра.
hidden.bs.modal Ця подія запускається, коли модаль закінчується приховуванням від користувача (буде чекати завершення переходів CSS). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})