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, koniecznie 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 use 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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  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.

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

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>

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.

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

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

<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" data-bs-dismiss="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" data-bs-dismiss="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 swojego znacznika modalnego.

<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ż dodajemy je już 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 rozmiar „średni”.

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

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

Klasa	Dostępność
`.modal-fullscreen`	Zawsze
`.modal-fullscreen-sm-down`	Poniżej`576px`
`.modal-fullscreen-md-down`	Poniżej`768px`
`.modal-fullscreen-lg-down`	Poniżej`992px`
`.modal-fullscreen-xl-down`	Poniżej`1200px`
`.modal-fullscreen-xxl-down`	Poniżej`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Zmienne

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

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 {
        @include border-radius(0);
      }

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

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

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

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>

Przez JavaScript

Utwórz modalny za pomocą jednej linii JavaScript:

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

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-backdrop="".

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

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.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

przełącznik

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

myModal.toggle()

pokazać

Ręcznie otwiera modalne. Powraca do wywołującego, zanim modalny został faktycznie pokazany (tj. przed shown.bs.modalwystąpieniem zdarzenia).

myModal.show()

Możesz również przekazać element DOM jako argument, który może zostać odebrany w zdarzeniach modalnych (jako relatedTargetwłaściwość).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ukryć

Ręcznie ukrywa modalny. Powraca do wywołującego, zanim mod został faktycznie ukryty (tj. przed hidden.bs.modalwystąpieniem zdarzenia).

myModal.hide()

handleUpdate

Ręcznie dostosuj położenie modalu, jeśli jego wysokość zmieni się, gdy jest on otwarty (np. w przypadku pojawienia się paska przewijania).

myModal.handleUpdate()

dysponować

Niszczy modalny elementu. (Usuwa dane zapisane w elemencie DOM)

myModal.dispose()

uzyskac instancje

Metoda statyczna , która pozwala uzyskać instancję modalną skojarzoną z elementem DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Metoda statyczna , która pozwala uzyskać instancję modalną skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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">).

Typ wydarzenia	Opis
`show.bs.modal`	To zdarzenie jest wyzwalane natychmiast po `show`wywołaniu metody wystąpienia. W przypadku kliknięcia kliknięty element jest dostępny jako `relatedTarget`wł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 `relatedTarget`właściwość zdarzenia.
`hide.bs.modal`	To zdarzenie jest wywoływane natychmiast po `hide`wywoł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ścia CSS).
`hidePrevented.bs.modal`	To zdarzenie jest wywoływane, gdy wyświetlany jest modalny, a jego tło jest `static`ustawione, a kliknięcie poza modem lub naciśnięcie klawisza Escape jest wykonywane z opcją klawiatury lub `data-bs-keyboard`ustawioną na `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})