Bootstrap 5 modul

Modul

Modal-komponenten är en dialog/flytande fönster som visas i övre delen av den aktuella sidan:

Hur man skapar en modal

Följande exempel visar hur man skapar en grundläggande modal:

Exempel

<!-- Knapp för att öppna modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Öppna modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modalrubrik -->
      <div class="modal-header">
        <h4 class="modal-title">Modalrubrik</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modalinnehåll -->
      <div class="modal-body">
        Modalinnehåll ..
      </div>
      <!-- Modalfot -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Stäng</button>
      </div>
    </div>
  </div>
</div>

Prova själv

lägg till animation

Använd .fade Lägg till klass för att lägga till in- och uttoningseffekter vid öppning och stängning av modalen:

Exempel

<!-- Toning modal -->
<div class="modal fade"></div>
<!-- Modal utan animation -->
<div class="modal"></div>

Prova själv

Modalstorlek

Genom att lägga till för liten modal .modal-sm klass (max-bredd 300px) för att lägga till stor modal .modal-lg klass (max-bredd 800px) eller lägg till för stor modal .modal-xl för att ändra storleken på modalen (max-bredd 1140 pixlar). Standard är 500 pixlar som största bredd.

Vänligen lägg till .modal-dialog Lägg till klass och storleksklass tillsammans till <div> Element:

Liten modal

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

Prova själv

Stor modal

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

Prova själv

Extra stor modul

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

Prova själv

Som standard är modalens storlek "medium" (max-bredd 500px).

Fullskärmsmodul

Om du vill att modalen ska täcka hela sidans bredd och höjd, använd .modal-fullscreen Klass:

Exempel

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

Prova själv

Responsiva fullskärmsmodaler

Du kan också använda .modal-fullscreen-*-* Klass styr när en modul ska visas i fullskärm:

Klass Beskrivning Exempel
.modal-fullscreen-sm-down Fyller hela skärmen under 576px Prova själv
.modal-fullscreen-md-down Fyller hela skärmen under 768px Prova själv
.modal-fullscreen-lg-down Fyller hela skärmen under 992px Prova själv
.modal-fullscreen-xl-down Fyller hela skärmen under 1200px Prova själv
.modal-fullscreen-xxl-down Fyller hela skärmen under 1400px Prova själv

Centrerade modaler

Genom att använda .modal-dialog-centric Klass, centrerar modalen både vertikalt och horisontellt i sidan:

Exempel

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

Prova själv

Rullande modul

När det finns mycket innehåll i modalen läggs en rullgardin till sidan. Se på följande exempel för att förstå:

Exempel

<div class="modal-dialog">

Prova själv

Men genom att använda .modal-dialog-scrollable Lägg till i .modal-dialog Det är möjligt att skrolla inom modalen utan att skrolla på sidan själv:

Exempel

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

Prova själv