Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Modaalinen

Käytä Bootstrapin JavaScript-modaalilaajennusta lisätäksesi sivustollesi valintaikkunoita lightboxeja, käyttäjäilmoituksia tai täysin mukautettua sisältöä varten.

Tällä sivulla

Kuinka se toimii

Ennen kuin aloitat Bootstrapin modaalikomponentin käytön, muista lukea seuraava, koska valikkovaihtoehdot ovat äskettäin muuttuneet.

  • Modaalit on rakennettu HTML:llä, CSS:llä ja JavaScriptillä. Ne sijoitetaan kaiken muun asiakirjan päälle ja poistavat vierityksen, <body>jotta modaalinen sisältö vierii sen sijaan.
  • Modaalin "tausta" napsauttaminen sulkee modaalin automaattisesti.
  • Bootstrap tukee vain yhtä modaaliikkunaa kerrallaan. Sisäkkäisiä modaaleja ei tueta, koska uskomme niiden olevan huonoja käyttökokemuksia.
  • Modaalit käyttävät position: fixed, mikä voi joskus olla hieman erityistä sen renderöinnin suhteen. Aina kun mahdollista, sijoita modaalinen HTML-koodisi ylimmälle tasolle välttääksesi muiden elementtien mahdolliset häiriöt. Saatat todennäköisesti törmätä ongelmiin, kun asetat .modaltoisen kiinteän elementin sisään.
  • Jälleen kerran, johtuen position: fixedmodaalien käytöstä mobiililaitteissa on joitain varoituksia. Katso lisätietoja selaimen tukidokumenteistamme .
  • Koska HTML5 määrittelee semantiikkansa, HTML- autofocusattribuutilla ei ole vaikutusta Bootstrap-modaaleihin. Saat saman vaikutuksen käyttämällä mukautettua JavaScriptiä:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Jatka lukemista saadaksesi esittelyt ja käyttöohjeet.

Esimerkkejä

Alla on staattinen modaalinen esimerkki (tarkoittaa sen positionja displayon ohitettu). Mukana ovat modaalinen ylätunniste, modaalinen runko (pakollinen padding) ja modaalinen alatunniste (valinnainen). Pyydämme lisäämään modaalisia otsikoita hylkäystoimintoihin aina kun mahdollista, tai tarjoamaan toisen nimenomaisen hylkäystoiminnon.

Modaalinen otsikko

Modaalinen leipäteksti menee tähän.

<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

Vaihda toimiva modaalidemo napsauttamalla alla olevaa painiketta. Se liukuu alas ja häivyttää sivun yläreunasta.

<!-- 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>

Staattinen tausta

Kun tausta on staattinen, modaali ei sulkeudu, kun sitä napsautetaan sen ulkopuolella. Napsauta alla olevaa painiketta kokeillaksesi sitä.

<!-- 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>

Pitkän sisällön vierittäminen

Kun modaalit tulevat liian pitkiksi käyttäjän näkymään tai laitteelle, ne rullaavat itse sivusta riippumatta. Kokeile alla olevaa demoa nähdäksesi, mitä tarkoitamme.

Voit myös luoda vieritettävän modaalin, jonka avulla voit vierittää modaalirunkoa lisäämällä .modal-dialog-scrollablesiihen .modal-dialog.

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

Pystysuoraan keskitetty

Lisää modaalin .modal-dialog-centeredkeskittämiseksi .modal-dialogpystysuoraan.

<!-- 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>

Työkaluvinkit ja ponnahdusikkunat

Työkaluvihjeitä ja ponnahdusikkunoita voidaan sijoittaa modaaleihin tarpeen mukaan . Kun modaalit suljetaan, myös kaikki työkaluvinkit ja ponnahdusikkunat hylätään automaattisesti.

<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>

Ristikon käyttäminen

Hyödynnä Bootstrap-ruudukkojärjestelmää modaalissa sijoittamalla .container-fluidsisään .modal-body. Käytä sitten normaaleja ruudukkojärjestelmäluokkia kuten missä tahansa muuallakin.

<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>

Vaihteleva modaalinen sisältö

Onko sinulla joukko painikkeita, jotka kaikki laukaisevat saman modaalin hieman erilaisella sisällöllä? Käytä event.relatedTargetja HTML - data-bs-*attribuutteja muuttaaksesi modaalin sisältöä sen mukaan, mitä painiketta napsautettiin.

Alla on live-demo, jota seuraa esimerkki HTML:stä ja JavaScriptistä. Saat lisätietoja lukemalla modaalitapahtumien asiakirjoja relatedTarget.

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
})

Vaihda modaalien välillä

Vaihda useiden modaalien välillä käyttämällä attribuuttien data-bs-targetja näppärää sijoittelua data-bs-toggle. Voit esimerkiksi vaihtaa salasanan palautusmodaalin jo avoimesta sisäänkirjautumismodaalista. Huomaa, että useita modaaleja ei voi avata samanaikaisesti – tämä menetelmä yksinkertaisesti vaihtaa kahden erillisen modaalin välillä.

Avaa ensimmäinen modaali
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>

Vaihda animaatiota

Muuttuja $modal-fade-transformmäärittää muunnostilan .modal-dialogennen modaalista häivytysanimaatiota, $modal-show-transformmuuttuja määrittää muunnoksen .modal-dialogmodaalisen häivytysanimaatioon lopussa.

Jos haluat esimerkiksi zoomata animaation, voit asettaa $modal-fade-transform: scale(.8).

Poista animaatio

Jos modaalit vain näkyvät sen sijaan, että ne katoavat näkyvistä, poista .fadeluokka modaalimerkinnöistäsi.

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

Dynaamiset korkeudet

Jos modaalin korkeus muuttuu sen ollessa auki, sinun tulee soittaa myModal.handleUpdate()ja säätää modaalin sijainti uudelleen, jos vierityspalkki tulee näkyviin.

Esteettömyys

Muista lisätä aria-labelledby="..."modaalinimikkeeseen viitaten .modal. Lisäksi voit antaa kuvauksen modaalisesta dialogistasi aria-describedbypäällä .modal. Huomaa, että sinun ei tarvitse lisätä, role="dialog"koska lisäämme sen jo JavaScriptin kautta.

YouTube-videoiden upottaminen

YouTube-videoiden upottaminen modaaleihin vaatii ylimääräisen JavaScriptin (ei Bootstrapissa), jotta toisto pysähtyy automaattisesti ja paljon muuta. Katso tästä hyödyllisestä Stack Overflow -viestistä lisätietoja.

Valinnaiset koot

Modaaleilla on kolme valinnaista kokoa, jotka ovat saatavilla modifiointiluokkien kautta sijoitettaviksi .modal-dialog. Nämä koot alkavat tietyissä keskeytyspisteissä välttää vaakasuuntaiset vierityspalkit kapeammissa kuvaporteissa.

Koko Luokka Modaalinen maksimileveys
Pieni .modal-sm 300px
Oletus Ei mitään 500px
Suuri .modal-lg 800px
XL .modal-xl 1140px

Oletusmodaalimme ilman modifikaatioita muodostaa "keskikokoisen" modaalin.

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

Koko näytön modaali

Toinen ohitus on mahdollisuus ponnahtaa esiin modaali, joka peittää käyttäjän näkymän, ja se on käytettävissä .modal-dialog.

Luokka Saatavuus
.modal-fullscreen Aina
.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

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa modaalit käyttävät nyt paikallisia CSS-muuttujia .modaltehostetussa .modal-backdropreaaliaikaisessa mukauttamisessa. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

  --#{$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};

Sass muuttujat

$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);

Silmukka

Responsiiviset koko näytön modaalit luodaan $breakpointskartan ja silmukan kautta 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;
      }
    }
  }
}

Käyttö

Modaalilaajennus vaihtaa piilotetun sisällön tarpeen mukaan tietomääritteiden tai JavaScriptin avulla. Se myös ohittaa oletusarvoisen vierityskäyttäytymisen ja luo .modal-backdropnapsautusalueen, joka hylkää näytetyt modaalit, kun napsautetaan modaalin ulkopuolella.

Tietomääritteiden kautta

Vaihda

Aktivoi modaali kirjoittamatta JavaScriptiä. Aseta data-bs-toggle="modal"ohjainelementille, kuten painikkeelle, yhdessä data-bs-target="#foo"tai href="#foo"kohdistaaksesi tiettyyn modaaliin vaihtaaksesi.

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

Hylkää

Irtisanominen voidaan saavuttaa modaalindata painikkeen attribuutilla, kuten alla on esitetty:

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

tai modaalin ulkopuolella olevalla painikkeella data-bs-targetalla kuvatulla tavalla:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Vaikka molempia tapoja hylätä modaali on tuettu, muista, että hylkääminen modaalin ulkopuolelta ei vastaa ARIA Authoring Practices Guide -valintaikkunan (modaali) mallia . Tee tämä omalla vastuullasi.

JavaScriptin kautta

Luo modaali yhdellä JavaScript-rivillä:

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

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Nimi Tyyppi Oletus Kuvaus
backdrop boolen,'static' true Sisältää modaalitaustaelementin. Vaihtoehtoisesti voit määrittää statictaustalle, joka ei sulje modaalia napsautettaessa.
focus boolean true Keskittää modaaliin alustuksen yhteydessä.
keyboard boolean true Sulkee modaalin, kun Esc-näppäintä painetaan.

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

Ohitusvaihtoehdot

Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Menetelmä Kuvaus
dispose Tuhoaa elementin modaalin. (Poistaa DOM-elementtiin tallennetut tiedot)
getInstance Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän modaalin esiintymän.
getOrCreateInstance Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän modaalin esiintymän tai luoda uuden, jos sitä ei alustettu.
handleUpdate Säädä modaalin asentoa manuaalisesti uudelleen, jos modaalin korkeus muuttuu sen ollessa auki (eli jos vierityspalkki tulee näkyviin).
hide Piilottaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todella piilotettu (ts. ennen hidden.bs.modaltapahtuman tapahtumista).
show Avaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa esitetty (eli ennen shown.bs.modaltapahtumaa). Voit myös välittää DOM-elementin argumenttina, joka voidaan vastaanottaa modaalitapahtumissa ( relatedTargetominaisuutena). (eli const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Vaihtaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa näytetty tai piilotettu (ts. ennen kuin shown.bs.modaltapahtuma hidden.bs.modaltapahtuu).

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten. Kaikki modaalitapahtumat laukaistaan ​​itse modaaliin (eli kohtaan <div class="modal">).

Tapahtuma Kuvaus
hide.bs.modal Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
hidden.bs.modal Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista).
hidePrevented.bs.modal Tämä tapahtuma laukeaa, kun modaali näytetään, sen tausta on staticja suoritetaan napsautus modaalin ulkopuolella. Tapahtuma laukeaa myös, kun estonäppäintä painetaan ja keyboardvaihtoehdoksi on asetettu false.
show.bs.modal Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan. Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä relatedTargettapahtuman ominaisuutena.
shown.bs.modal Tämä tapahtuma käynnistyy, kun modaali on asetettu käyttäjän näkyväksi (odottaa CSS-siirtymien valmistumista). Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä relatedTargettapahtuman ominaisuutena. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})