Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Modaalne

Kasutage Bootstrapi JavaScripti modaalset pistikprogrammi, et lisada oma saidile dialoogid valguskastide, kasutajate märguannete või täielikult kohandatud sisu jaoks.

Sellel lehel

Kuidas see töötab

Enne Bootstrapi modaalkomponendiga alustamist lugege kindlasti järgmist, kuna meie menüüvalikud on hiljuti muutunud.

  • Modaalid on üles ehitatud HTML-i, CSS-i ja JavaScriptiga. Need asuvad dokumendis kõige muu kohal ja eemaldavad kerimise, <body>nii et selle asemel keritakse modaalset sisu.
  • Klõpsates modaalsel taustadekoratsioonil, suletakse modaal automaatselt.
  • Bootstrap toetab korraga ainult ühte modaalset akent. Pesastatud modaale ei toetata, kuna usume, et need on kehvad kasutuskogemused.
  • Modaalid kasutavad position: fixed, mis võib mõnikord olla selle renderdamisel pisut eriline. Võimaluse korral asetage oma modaalne HTML kõrgeimale tasemele, et vältida teiste elementide võimalikke häireid. Tõenäoliselt tekib probleeme .modalteise fikseeritud elemendi pesastamisel.
  • Jällegi, tänu position: fixed, on mobiilseadmetes modaalide kasutamisel mõned hoiatused. Vaadake üksikasju meie brauseri tugidokumentidest .
  • HTML5 semantika määratlemise tõttu ei mõjuta HTML-i atribuut Bootstrapi modaalides autofocus. Sama efekti saavutamiseks kasutage mõnda kohandatud JavaScripti:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Jätkake demode ja kasutusjuhiste lugemist.

Näited

Allpool on staatiline modaalne näide (see tähendab, et selle positionja displayon tühistatud). Kaasatud on modaalne päis, modaalne keha (nõutav jaoks padding) ja modaalne jalus (valikuline). Palume teil võimaluse korral lisada modaalsed päised koos loobumistoimingutega või esitada mõni muu selgesõnaline loobumistoiming.

Modaalne pealkiri

Modaalne põhitekst läheb siia.

<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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Live demo

Lülitage töötav modaaldemo sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.

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

Staatiline taust

Kui taust on seatud staatiliseks, siis modaal ei sulgu, kui klõpsate sellest väljaspool. Proovimiseks klõpsake alloleval nupul.

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

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

Pika sisu kerimine

Kui modaalid muutuvad kasutaja vaateava või seadme jaoks liiga pikaks, kerivad need lehest endast sõltumatult. Proovige allolevat demo, et näha, mida me mõtleme.

Saate luua ka keritava modaali, mis võimaldab kerida modaalkeha, lisades .modal-dialog-scrollablesellele .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertikaalselt tsentreeritud

Modaali vertikaalseks keskpunktiks .modal-dialog-centeredlisamine ..modal-dialog

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Tööriistanõuanded ja hüpikaknad

Vajadusel saab modaalidesse paigutada tööriistavihjeid ja hüpikaknaid . Kui modaalid on suletud, jäetakse automaatselt kõrvale ka kõik tööriistaspikrid ja hüpikaknad.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Võre kasutamine

Kasutage modaalis Bootstrapi ruudustikusüsteemi , pesatades .container-fluid. .modal-bodySeejärel kasutage tavalisi ruudustikusüsteemi klasse nagu mujal.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Muutuv modaalne sisu

Kas teil on hunnik nuppe, mis kõik käivitavad sama modaali ja veidi erineva sisuga? Kasutage modaali sisu muutmiseks atribuuteevent.relatedTarget ja HTMLdata-bs-* -i , olenevalt sellest, millist nuppu klõpsati.

Allpool on reaalajas demo, millele järgneb HTML-i ja JavaScripti näide. Lisateabe saamiseks lugege üksikasju kohta modaalsete sündmuste dokumentidestrelatedTarget .

html 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<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">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

Modaalide vahel lülitumine

Lülitage mitme modaali vahel, kasutades atribuutide data-bs-targetja nutikat paigutust. data-bs-toggleNäiteks võite parooli lähtestamise modaali sisse lülitada juba avatud sisselogimismodaalis. Pange tähele, et mitut modaali ei saa korraga avada – see meetod lülitub lihtsalt kahe erineva modaali vahel.

Ava esimene modaal
html 
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Muuda animatsiooni

Muutuja $modal-fade-transformmäärab teisendusoleku .modal-dialogenne modaalset sumbuvat animatsiooni, $modal-show-transformmuutuja määrab teisenduse .modal-dialogmodaalse sumbumise animatsiooni lõpus.

Kui soovite näiteks suumimisanimatsiooni, saate määrata $modal-fade-transform: scale(.8).

Eemalda animatsioon

Modaalide puhul, mis lihtsalt ilmuvad, mitte ei tuhmu vaatamiseks, eemaldage .fadeklass oma modaalimärgistusest.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dünaamilised kõrgused

Kui modaali kõrgus muutub, kui see on avatud, peaksite helistama myModal.handleUpdate(), et modaali asukohta uuesti reguleerida juhuks, kui ilmub kerimisriba.

Juurdepääsetavus

Kindlasti lisage aria-labelledby="...", viidates modaalsele pealkirjale, .modal. Lisaks võite anda oma modaalse dialoogi aria-describedbykirjelduse .modal. Pange tähele, et te ei pea lisama, role="dialog"kuna lisame selle juba JavaScripti kaudu.

YouTube'i videote manustamine

YouTube'i videote modaalidesse manustamiseks on vaja täiendavat JavaScripti, mis ei ole Bootstrapis, et taasesitus automaatselt peatada ja palju muud. Lisateabe saamiseks vaadake seda kasulikku Stack Overflow postitust .

Valikulised suurused

Modaalidel on kolm valikulist suurust, mis on saadaval modifikaatoriklasside kaudu, mis asetatakse .modal-dialog. Need suurused rakenduvad teatud murdepunktides, et vältida kitsamates vaateavades horisontaalseid kerimisribasid.

Suurus Klass Modaalne maksimaalne laius
Väike .modal-sm 300px
Vaikimisi Mitte ühtegi 500px
Suur .modal-lg 800px
Väga suur .modal-xl 1140px

Meie vaikimisi modaal ilma modifikaatorita klassi moodustab "keskmise" suurusega modaali.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Täisekraani modaal

Teine alistamine on võimalus avada modaal, mis katab kasutaja vaateava, mis on saadaval modifikaatoriklasside kaudu, mis on paigutatud .modal-dialog.

Klass Kättesaadavus
.modal-fullscreen Alati
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad modaalid nüüd kohalikke CSS-i muutujaid, .modalet .modal-backdropneid reaalajas kohandada. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sassi muutujad

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Reageerivad täisekraani modaalid genereeritakse $breakpointskaardi ja tsükli kaudu scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Kasutamine

Modaalne pistikprogramm lülitab teie peidetud sisu nõudmisel andmeatribuutide või JavaScripti kaudu sisse. Samuti alistab see kerimise vaikekäitumise ja loob .modal-backdropklõpsuala kuvatavate modaalide kõrvalejätmiseks, kui klõpsate väljaspool modaali.

Andmeatribuutide kaudu

Lülita sisse

Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-bs-toggle="modal"kontrolleri element, nagu nupp, koos data-bs-target="#foo"või href="#foo", et sihtida ümberlülitamiseks konkreetset modaali.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Vabaks laskma

Vallandumise saab saavutada modaalidata nupul oleva atribuudiga, nagu on näidatud allpool:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

või modaalist väljaspool asuval nupul , kasutades data-bs-targetallpool näidatud viisil:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Kuigi toetatakse mõlemat modaalist loobumise viisi, pidage meeles, et väljastpoolt modaali loobumine ei ühti ARIA loomise tavade juhendi dialoogi (modaalse) mustriga . Tehke seda omal riisikol.

JavaScripti kaudu

Looge modaal ühe JavaScripti reaga:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

Nimi Tüüp Vaikimisi Kirjeldus
backdrop boolean,'static' true Sisaldab modaalset taustaelementi. Teise võimalusena määrake statictaustadekoratsioon, mis klõpsamisel modaali ei sulge.
focus tõeväärtus true Initsialiseerimisel keskendutakse modaalile.
keyboard tõeväärtus true Sulgeb modaali, kui vajutada paoklahvi.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

Mööduvalikud

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
meetod Kirjeldus
dispose Hävitab elemendi modaali. (Eemaldab DOM-elemendile salvestatud andmed)
getInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud modaalse eksemplari.
getOrCreateInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud modaalse eksemplari või luua uue, kui seda ei lähtestatud.
handleUpdate Reguleerige modaali asendit käsitsi, kui modaali kõrgus muutub avatud olekus (st kui ilmub kerimisriba).
hide Peidab modaali käsitsi. Naaseb helistaja juurde enne, kui modaal on tegelikult peidetud (st ennehidden.bs.modal sündmuse toimumist).
show Avab modaali käsitsi. Naaseb helistaja juurde enne, kui modaali on tegelikult näidatud (st enne shown.bs.modalsündmuse toimumist). Samuti saate edastada DOM-i elemendi argumendina, mida saab modaalsetes sündmustes vastu võtta ( relatedTargetatribuudina). (stconst modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle) .
toggle Lülitab modaali käsitsi ümber. Naaseb helistaja juurde enne, kui modaal on tegelikult näidatud või peidetud (st enne shown.bs.modalvõi hidden.bs.modalsündmuse toimumist).

Sündmused

Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks. Kõik modaalsündmused käivitatakse modaali enda (st <div class="modal">) suunas.

Sündmus Kirjeldus
hide.bs.modal See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
hidden.bs.modal See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud).
hidePrevented.bs.modal See sündmus käivitatakse, kui modaali näidatakse, selle taust on staticja tehakse klõps väljaspool modaali. Sündmus käivitatakse ka siis, kui paoklahvi vajutatakse ja keyboardsuvand on seatud väärtusele false.
show.bs.modal See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse. Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTargetsündmuse atribuudina.
shown.bs.modal See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTargetsündmuse atribuudina. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})