Modal

Brug Bootstraps JavaScript modal plugin til at tilføje dialogbokse til dit websted til lysbokse, brugermeddelelser eller helt tilpasset indhold.

Hvordan det virker

Før du går i gang med Bootstraps modale komponent, skal du sørge for at læse følgende, da vores menuindstillinger for nylig er ændret.

Modaler er bygget med HTML, CSS og JavaScript. De er placeret over alt andet i dokumentet og fjerner rulle fra dokumentet, <body>så modalt indhold ruller i stedet.
Ved at klikke på den modale "baggrund" lukkes modalen automatisk.
Bootstrap understøtter kun ét modalt vindue ad gangen. Indlejrede modaler understøttes ikke, da vi mener, at de er dårlige brugeroplevelser.
Modaler bruger position: fixed, som nogle gange kan være lidt speciel med hensyn til gengivelsen. Når det er muligt, skal du placere din modale HTML på øverste niveau for at undgå potentiel interferens fra andre elementer. Du vil sandsynligvis løbe ind i problemer, når du indlejrer en .modali et andet fast element.
Endnu en gang, grundet position: fixed, er der nogle forbehold med at bruge modaler på mobile enheder. Se vores browsersupportdokumenter for detaljer.
På grund af hvordan HTML5 definerer sin semantik, har autofocusHTML-attributten ingen effekt i Bootstrap-modaler. For at opnå den samme effekt skal du bruge noget tilpasset JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Animationseffekten af denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Fortsæt med at læse for demoer og retningslinjer for brug.

Eksempler

Nedenfor er et statisk modalt eksempel (hvilket betyder, at det er positionog displayer blevet tilsidesat). Inkluderet er modal sidehoved, modal tekst (påkrævet for padding) og modal sidefod (valgfrit). Vi beder dig om at inkludere modale overskrifter med afvisningshandlinger, når det er muligt, eller angive en anden eksplicit afvisningshandling.

<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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Live demo

Skift en fungerende modal demo ved at klikke på knappen nedenfor. Det vil glide ned og fade ind fra toppen af siden.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Statisk baggrund

Når baggrund er indstillet til statisk, lukker modalen ikke, når der klikkes uden for den. Klik på knappen nedenfor for at prøve det.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Rulle langt indhold

Når modalerne bliver for lange til brugerens viewport eller enhed, ruller de uafhængigt af selve siden. Prøv demoen nedenfor for at se, hvad vi mener.