Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
in English

Modalny

Użyj modalnej wtyczki JavaScript Bootstrap, aby dodać do swojej witryny okna dialogowe dla lightboxów, powiadomień dla użytkowników lub całkowicie niestandardowych treści.

Na tej stronie

Jak to działa

Zanim zaczniesz korzystać z modalnego komponentu Bootstrap, przeczytaj poniższe, ponieważ nasze opcje menu uległy ostatnio zmianie.

  • Modale są budowane za pomocą HTML, CSS i JavaScript. Są one umieszczane nad wszystkim innym w dokumencie i usuwają przewijanie <body>, aby zamiast tego przewijała się zawartość modalna.
  • Kliknięcie modalnego „tła” automatycznie zamknie modalne.
  • Bootstrap obsługuje tylko jedno okno modalne na raz. Zagnieżdżone mody nie są obsługiwane, ponieważ uważamy, że są one kiepskie dla użytkowników.
  • Modals używa position: fixed, co czasami może być nieco specyficzne w przypadku renderowania. Jeśli to możliwe, umieść modalny kod HTML na najwyższym poziomie, aby uniknąć potencjalnych zakłóceń ze strony innych elementów. Prawdopodobnie napotkasz problemy podczas zagnieżdżania .modalw innym stałym elemencie.
  • Po raz kolejny, ze względu na position: fixed, istnieją pewne zastrzeżenia dotyczące korzystania z modali na urządzeniach mobilnych. Szczegółowe informacje można znaleźć w naszej dokumentacji dotyczącej obsługi przeglądarek.
  • Ze względu na sposób, wautofocus jaki HTML5 definiuje swoją semantykę, atrybut HTML nie działa w modach Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScriptu:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .

Czytaj dalej, aby uzyskać dema i wskazówki dotyczące użytkowania.

Przykłady

Poniżej znajduje się statyczny przykład modalny (oznaczający jego positioni displayzostały zastąpione). Uwzględniono nagłówek modalny, treść modalną (wymagane dla padding) i stopkę modalną (opcjonalnie). Prosimy o dołączanie nagłówków modalnych do akcji odrzucania, gdy tylko jest to możliwe, lub podanie innej wyraźnej akcji odrzucania.

Tytuł modalny

Tutaj znajduje się modalny tekst treści.

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

Demo na żywo

Przełącz działające demo modalne, klikając poniższy przycisk. Zsunie się i zniknie od góry strony.

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

Tło statyczne

Gdy tło jest ustawione jako statyczne, modalne nie zamknie się po kliknięciu poza nim. Kliknij przycisk poniżej, aby spróbować.

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

Przewijanie długich treści

Gdy modalności stają się zbyt długie dla okna roboczego lub urządzenia użytkownika, przewijają się niezależnie od samej strony. Wypróbuj poniższe demo, aby zobaczyć, co mamy na myśli.

Możesz również utworzyć przewijalny modalny, który umożliwia przewijanie treści modalnej, dodając .modal-dialog-scrollabledo .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Wyśrodkowany w pionie

Dodaj .modal-dialog-centereddo, .modal-dialogaby wyśrodkować w pionie modalny.

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

Podpowiedzi i popovery

Etykiety narzędzi i okienka popover można umieszczać w ramach modalnych w razie potrzeby. Gdy modalne są zamknięte, wszelkie podpowiedzi i okienka popover w obrębie są również automatycznie odrzucane.

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

Korzystanie z siatki

Wykorzystaj system siatki Bootstrap w ramach modalnej, zagnieżdżając .container-fluidw .modal-body. Następnie użyj normalnych klas systemu siatki, tak jak gdziekolwiek indziej.

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

Różne treści modalne

Masz kilka przycisków, które uruchamiają ten sam mod z nieco inną zawartością? Użyj atrybutówevent.relatedTarget i HTMLdata-bs-* , aby zróżnicować zawartość modułu modalnego w zależności od tego, który przycisk został kliknięty.

Poniżej znajduje się demo na żywo, a następnie przykładowy kod HTML i JavaScript. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją dotyczącą zdarzeń modalnych, aby uzyskać szczegółowe informacje na temat 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
})

Przełączaj między modalami

Przełączaj się między wieloma modami z pewnym sprytnym rozmieszczeniem atrybutów data-bs-targeti . data-bs-toggleNa przykład możesz przełączyć tryb resetowania hasła z już otwartego trybu logowania. Należy pamiętać, że wiele modów nie może być otwartych w tym samym czasie — ta metoda po prostu przełącza między dwoma oddzielnymi modami.

Otwórz pierwszy mod
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>

Zmień animację

Zmienna $modal-fade-transformokreśla stan transformacji .modal-dialogprzed modalną animacją zanikania, $modal-show-transformzmienna określa transformację .modal-dialogna końcu modalnej animacji zanikania.

Jeśli chcesz na przykład animację powiększenia, możesz ustawić $modal-fade-transform: scale(.8).

Usuń animację

W przypadku modów, które po prostu pojawiają się, a nie pojawiają się w widoku, usuń .fadeklasę ze znaczników modalnych.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Wysokości dynamiczne

Jeśli wysokość modalu zmienia się, gdy jest otwarty, powinieneś wywołać, myModal.handleUpdate()aby ponownie dostosować pozycję modalu w przypadku pojawienia się paska przewijania.

Dostępność

Pamiętaj, aby dodać aria-labelledby="...", odwołując się do tytułu modalnego, do .modal. Dodatkowo możesz podać opis swojego modalnego okna dialogowego za pomocą aria-describedbyon .modal. Pamiętaj, że nie musisz dodawać role="dialog", ponieważ już dodajemy je za pomocą JavaScript.

Osadzanie filmów z YouTube

Osadzanie filmów z YouTube w modach wymaga dodatkowego JavaScriptu, który nie jest dostępny w Bootstrap, aby automatycznie zatrzymać odtwarzanie i nie tylko. Zobacz ten pomocny post Stack Overflow , aby uzyskać więcej informacji.

Opcjonalne rozmiary

Modale mają trzy opcjonalne rozmiary, dostępne za pośrednictwem klas modyfikatorów, które można umieścić na .modal-dialog. Te rozmiary pojawiają się w pewnych punktach przerwania, aby uniknąć poziomych pasków przewijania w węższych oknach roboczych.

Rozmiar Klasa Modalna maksymalna szerokość
Mały .modal-sm 300px
Domyślna Nic 500px
Wielki .modal-lg 800px
Bardzo duży .modal-xl 1140px

Nasz domyślny modalny bez klasy modyfikatora stanowi modalny o „średnim” rozmiarze.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Tryb pełnoekranowy

Innym nadpisaniem jest opcja wyskakującego okna modalnego obejmującego widok użytkownika, dostępnego za pośrednictwem klas modyfikatorów umieszczonych na .modal-dialog.

Klasa Dostępność
.modal-fullscreen Zawsze
.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

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, modalności używają teraz lokalnych zmiennych CSS w .modalcelu .modal-backdropudoskonalenia dostosowywania w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

  --#{$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};

Zmienne Sassa

$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);

Pętla

Responsywne tryby pełnoekranowe są generowane przez $breakpointsmapę i pętlę w programie 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;
      }
    }
  }
}

Stosowanie

Wtyczka modalna przełącza Twoje ukryte treści na żądanie, za pomocą atrybutów danych lub JavaScript. Zastępuje również domyślne zachowanie przewijania i generuje a, .modal-backdropaby zapewnić obszar kliknięcia do odrzucania wyświetlanych modów po kliknięciu poza modem.

Poprzez atrybuty danych

Przełącznik

Aktywuj modalny bez pisania JavaScript. Ustaw data-bs-toggle="modal"na elemencie kontrolera, takim jak przycisk, wraz z data-bs-target="#foo"lub href="#foo", aby wskazać określony mod do przełączania.

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

Odrzucać

Zwolnienie można osiągnąć za pomocą dataatrybutu na przycisku w ramach modalnego , jak pokazano poniżej:

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

lub na przycisku poza modalnym , korzystając z data-bs-targetponiższego:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Chociaż obsługiwane są oba sposoby odrzucania modalnego, należy pamiętać, że odrzucanie spoza modalnego nie jest zgodne ze wzorcem (modalnym) w oknie dialogowym ARIA Authoring Practices Guide . Zrób to na własne ryzyko.

Przez JavaScript

Utwórz modalny za pomocą pojedynczej linii JavaScript:

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

Opcje

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z „ camelCase ” na „ kebab-case ” podczas przekazywania opcji przez atrybuty danych. Na przykład użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Nazwa Rodzaj Domyślna Opis
backdrop logiczne,'static' true Zawiera modalny element tła. Możesz też określić statictło, które nie zamyka modalnego po kliknięciu.
focus logiczne true Umieszcza fokus na modalnym po zainicjowaniu.
keyboard logiczne true Zamyka modalne po naciśnięciu klawisza Escape.

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .

Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji .

Opcje przekazywania

Aktywuje treść jako modalną. Akceptuje opcjonalne opcje object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
metoda Opis
dispose Niszczy modalny elementu. (Usuwa dane zapisane w elemencie DOM)
getInstance Metoda statyczna , która pozwala uzyskać instancję modalną skojarzoną z elementem DOM.
getOrCreateInstance Metoda statyczna , która pozwala uzyskać instancję modalną skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana.
handleUpdate Ręcznie dostosuj położenie modalu, jeśli jego wysokość zmienia się, gdy jest on otwarty (np. w przypadku pojawienia się paska przewijania).
hide Ręcznie ukrywa modalny. Powraca do wywołującego, zanim modalny został faktycznie ukryty (tj. przed hidden.bs.modalwystąpieniem zdarzenia).
show Ręcznie otwiera mod. Powraca do wywołującego, zanim modalny został faktycznie pokazany (tj. przed shown.bs.modalwystąpieniem zdarzenia). Możesz również przekazać element DOM jako argument, który może zostać odebrany w zdarzeniach modalnych (jako relatedTargetwłaściwość). (tj const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Ręcznie przełącza modalny. Powraca do wywołującego, zanim modalny został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.modallub ).hidden.bs.modal

Wydarzenia

Klasa modalna Bootstrap udostępnia kilka zdarzeń do podłączenia do funkcji modalnej. Wszystkie zdarzenia modalne są uruchamiane w samym module (tj. w <div class="modal">).

Wydarzenie Opis
hide.bs.modal To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody wystąpienia.
hidden.bs.modal To zdarzenie jest wywoływane po zakończeniu ukrywania modalności przed użytkownikiem (poczeka na zakończenie przejść CSS).
hidePrevented.bs.modal To zdarzenie jest uruchamiane, gdy pokazany jest mod, jego tło jest statici wykonywane jest kliknięcie poza modem. Zdarzenie jest również wywoływane po naciśnięciu klawisza Escape i ustawieniu keyboardopcji na false.
show.bs.modal To zdarzenie jest wyzwalane natychmiast po showwywołaniu metody wystąpienia. W przypadku kliknięcia kliknięty element jest dostępny jako relatedTargetwłaściwość zdarzenia.
shown.bs.modal To zdarzenie jest wywoływane, gdy modalny zostanie udostępniony użytkownikowi (będzie czekał na zakończenie przejść CSS). W przypadku kliknięcia kliknięty element jest dostępny jako relatedTargetwłaściwość zdarzenia. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})