Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
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>

Вар'іраванне мадальнага зместу

У вас ёсць куча кнопак, якія запускаюць адзін і той жа рэжым з трохі розным зместам? Выкарыстоўвайце атрыбутыevent.relatedTarget і HTMLdata-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 Уручную адкрывае мадальнае. Вяртаецца да абанента да таго, як мадальны параметр быў фактычна паказаны (г.зн. да таго , як shown.bs.modalадбудзецца падзея). Акрамя таго, вы можаце перадаць элемент DOM у якасці аргумента, які можна атрымаць у мадальных падзеях (у якасці relatedTargetўласцівасці). const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)( г.зн.
toggle Уручную пераключае мадальнае. Вяртаецца да выклікаючага да таго, як мадальны параметр быў фактычна паказаны або схаваны (г.зн. да таго , як адбудзецца падзея shown.bs.modalабо ).hidden.bs.modal

Падзеі

Мадальны клас Bootstrap паказвае некалькі падзей для падключэння да мадальнай функцыянальнасці. Усе мадальныя падзеі запускаюцца ў сам мадальны (г.зн. у <div class="modal">).

Падзея Апісанне
hide.bs.modal Гэта падзея запускаецца неадкладна, калі hideбыў выкліканы метад асобніка.
hidden.bs.modal Гэта падзея запускаецца, калі мадальны элемент перастае быць схаваным ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hidePrevented.bs.modal Гэта падзея запускаецца, калі паказаны мадальны, яго фон staticі пстрычка па-за межамі мадальнага. Падзея таксама запускаецца, калі націснутая клавіша выхаду і keyboardпараметр усталяваны на false.
show.bs.modal Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка. Калі гэта выклікана пстрычкай, націснуты элемент даступны як relatedTargetуласцівасць падзеі.
shown.bs.modal Гэта падзея запускаецца, калі мадальны элемент становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS). Калі гэта выклікана пстрычкай, націснуты элемент даступны як relatedTargetуласцівасць падзеі. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})