Bootstrap 5 modal

Modale

Modal-komponenten er en dialog/pop-up, der vises øverst på den aktuelle side:

Sådan oprettes en modal

Følgende eksempel viser, hvordan man opretter en grundlæggende modal:

Eksempel

<!-- Knappen til at åbne modalen -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Åbn modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modaloverskrift -->
      <div class="modal-header">
        <h4 class="modal-title">Modaloverskrift</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modalindhold -->
      <div class="modal-body">
        Modalindhold ..
      </div>
      <!-- Modalfod -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Luk</button>
      </div>
    </div>
  </div>
</div>

Prøv det selv

til at tilføje animation

Brug .fade Klassen tilføjes for at tilføje fade-effekt ved åbning og lukning af modalen:

Eksempel

<!-- Fade modal -->
<div class="modal fade"></div>
<!-- Modal uden animation -->
<div class="modal"></div>

Prøv det selv

Modalstørrelse

ved at tilføje til lille modal .modal-sm klassen (max-width 300px) for at tilføje stor modal .modal-lg klassen (max-width 800px) eller tilføj til stor modal .modal-xl for at ændre modalens størrelse (max-width 1140 pixels). Standard er 500 pixels som maksimal bredde.

Vælg .modal-dialog Tilføj klassen og størrelsesklassen sammen til <div> Element:

Lille modal

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

Prøv det selv

Stor modal

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

Prøv det selv

Ekstra stor modal

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

Prøv det selv

Standardstørrelsen på modalen er "medium" (500px maksimal bredde).

Fuldskærm modal

Hvis du ønsker, at modalen skal overgå hele siden bredt og højdt, skal du bruge .modal-fullscreen Klasser:

Eksempel

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

Prøv det selv

Responsiv fuldskærm modal

Du kan også bruge .modal-fullscreen-*-* Klasser styrer, hvornår modalen skal vises fuldskærm:

Klasser Beskrivelse Eksempel
.modal-fullscreen-sm-down 576px og ned til fuld skærm Prøv det selv
.modal-fullscreen-md-down 768px og ned til fuld skærm Prøv det selv
.modal-fullscreen-lg-down 992px og ned til fuld skærm Prøv det selv
.modal-fullscreen-xl-down 1200px og ned til fuld skærm Prøv det selv
.modal-fullscreen-xxl-down 1400px og ned til fuld skærm Prøv det selv

centrerede modaler

Ved at bruge .modal-dialog-centric Klasser, der centrerer modalen både lodret og vandret i siden:

Eksempel

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

Prøv det selv

Rullemodal

Når der er meget indhold i modalen, tilføjes der en rulleliste til siden. Se nedenstående eksempel for at forstå:

Eksempel

<div class="modal-dialog">

Prøv det selv

Men ved at bruge .modal-dialog-scrollable Tilføj til .modal-dialog Man kan kun skrolle i modalen, ikke i selve siden:

Eksempel

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

Prøv det selv