Bootstrap 5 modaalit

Modaali

Modal-komponentti on dialogi/poimennusikkuna, joka näkyy nykyisen sivun yläosassa:

Miten luodaan modali

Tässä on esimerkki siitä, miten luodaan perusmodali:

Esimerkki

<!-- Avaa modalia painamalla tätä nappia -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Avaa modali
</button>
<!-- Modali -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modaalin otsikko -->
      <div class="modal-header">
        <h4 class="modal-title">Modaalin otsikko</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modaalin pääasiallinen sisältö -->
      <div class="modal-body">
        Modaalin pääasiallinen sisältö ..
      </div>
      <!-- Modaalin alatunniste -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Sulje</button>
      </div>
    </div>
  </div>
</div>

Kokeile itse

lisätäksesi animaation

Käytä .fade Lisää peittymis- ja ilmestymisanimaatiot avattaessa ja sulkemalla modali:

Esimerkki

<!-- Peittyy ja ilmestyy -->
<div class="modal fade"></div>
<!-- Modali ilman animaatiota -->
<div class="modal"></div>

Kokeile itse

Modaalin kokot

lisää pienille modaleille lisää pienille modaleille .modal-sm luokka (max-width 300px) suurille modaleille .modal-lg luokka (max-width 800px) tai lisää .modal-xl

Muuta modalin kokoa (max-width 1140 pikseliä). Oletusarvo on 500 pikselin enimmäisleveys. .modal-dialog Lisää luokka ja kokoluokka <div> Elementti:

Pieni modali

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

Kokeile itse

Suuri modali

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

Kokeile itse

Extra Large Modal

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

Kokeile itse

Oletuksena modaalin koko on "medium" (500px max-width).

Täysin näytön kokoinen modaal

Jos haluat, että modaal kattaa sivun koko leveyden ja korkeuden, käytä .modal-fullscreen Luokka:

Esimerkki

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

Kokeile itse

Vastauskykyinen täysin näytön kokoinen modaal

Voit myös käyttää .modal-fullscreen-*-* Luokka hallitsee, milloin modaalin tulisi näyttää täysin näytön kokoinen:

Luokka Kuvaus Esimerkki
.modal-fullscreen-sm-down 576px ja alle täysin näytön Kokeile itse
.modal-fullscreen-md-down 768px ja alle täysin näytön Kokeile itse
.modal-fullscreen-lg-down 992px ja alle täysin näytön Kokeile itse
.modal-fullscreen-xl-down 1200px ja alle täysin näytön Kokeile itse
.modal-fullscreen-xxl-down 1400px ja alle täysin näytön Kokeile itse

Keskitetty modaal

Käyttämällä .modal-dialog-centric Luokka, keskittää modalin vaakasuoraan ja pystysuoraan sivulla:

Esimerkki

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

Kokeile itse

Pyöristävä modaal

Kun modaalissa on paljon sisältöä, sivulle lisätään pyöristäjä. Katso seuraava esimerkki ymmärtääksesi:

Esimerkki

<div class="modal-dialog">

Kokeile itse

Mutta, kun .modal-dialog-scrollable Lisää .modal-dialog Vain modaalissa voidaan pyöriä, ei sivun itseään:

Esimerkki

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

Kokeile itse