Modały Bootstrap 5

Modal

Komponenta Modal jest oknem dialogowym/pojawiającym się oknem, które pojawia się na górze bieżącej strony:

Jak utworzyć modal

Poniżej znajduje się przykład, jak utworzyć podstawowy modal:

Przykład

<!-- Przycisk otwierający modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Otwórz modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Nagłówek modalu -->
      <div class="modal-header">
        <h4 class="modal-title">Nagłówek Modalu</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Treść modalu -->
      <div class="modal-body">
        Treść modalu ..
      </div>
      <!-- Stopka modalu -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Zamknij</button>
      </div>
    </div>
  </div>
</div>

Spróbuj sam

dodaj animację

Proszę, użyj .fade Klasa dodaje efekt wstępnego i końcowego zaniku przy otwieraniu i zamykaniu modalu:

Przykład

<!-- Fade modal -->
<div class="modal fade"></div>
<!-- Modal bez animacji -->
<div class="modal"></div>

Spróbuj sam

Rozmiar modalu

dodając .modal-sm klasę (max-width 300px), aby dodać .modal-lg klasę (max-width 800px) lub dodaj .modal-xl aby zmienić rozmiar modalu (max-width 1140 pikseli). Domyślnie maksymalna szerokość to 500 pikseli.

Proszę, ustaw .modal-dialog Dodaj klasę i rozmiar do <div> Element:

Mały Modal

<div class="modal-dialog modal-sm">

Spróbuj sam

Duży Modal

<div class="modal-dialog modal-lg">

Spróbuj sam

Modal Extra Large

<div class="modal-dialog modal-xl">

Spróbuj sam

Domyślnie, rozmiar modalu wynosi "medium" (maksymalna szerokość 500px).

Modal pełnoekranowy

Jeśli chcesz, aby modal obejmował całą szerokość i wysokość strony, użyj .modal-fullscreen Klasa:

Przykład

<div class="modal-dialog modal-fullscreen">

Spróbuj sam

Reaktywnych modali pełnoekranowych

Możesz również użyć .modal-fullscreen-*-* Klasa kontroluje, kiedy modal powinien być wyświetlany w pełnym ekranie:

Klasa Opis Przykład
.modal-fullscreen-sm-down Poniżej 576px na pełnym ekranie Spróbuj sam
.modal-fullscreen-md-down Poniżej 768px na pełnym ekranie Spróbuj sam
.modal-fullscreen-lg-down Poniżej 992px na pełnym ekranie Spróbuj sam
.modal-fullscreen-xl-down Poniżej 1200px na pełnym ekranie Spróbuj sam
.modal-fullscreen-xxl-down Poniżej 1400px na pełnym ekranie Spróbuj sam

Centralnie umieszczonych modali

Przy użyciu .modal-dialog-centric Klasa, która wewnętrznie wertykalnie i poziomo centralizuje modal:

Przykład

<div class="modal-dialog modal-dialog-centered">

Spróbuj sam

Przewijanie modalu

Kiedy w modalu jest dużo treści, dodaje on paskę przewijania do strony. Zobacz poniższy przykład, aby zrozumieć:

Przykład

<div class="modal-dialog">

Spróbuj sam

Jednak, poprzez umieszczenie .modal-dialog-scrollable Dodaj do .modal-dialog Można przeglądać tylko w modalu, a nie w samej stronie:

Przykład

<div class="modal-dialog modal-dialog-scrollable">

Spróbuj sam