Modal

Brûk Bootstrap's JavaScript modale plugin om dialogen oan jo side ta te foegjen foar ljochtboxen, notifikaasjes fan brûkers, of folslein oanpaste ynhâld.

Op dizze side

Hoe't it wurket

Foardat jo begjinne mei de modale komponint fan Bootstrap, wês wis dat jo it folgjende lêze, om't ús menu-opsjes koartlyn binne feroare.

Modals binne boud mei HTML, CSS, en JavaScript. Se wurde oer al it oare yn it dokumint pleatst en scroll fuortsmite fan 'e <body>, sadat modale ynhâld ynstee rôlet.
Klikje op de modale "eftergrûn" sil de modale automatysk slute.
Bootstrap stipet mar ien modaal finster tagelyk. Nested modals wurde net stipe, om't wy leauwe dat se minne brûkersûnderfiningen binne.
Modalen brûke position: fixed, wat soms in bytsje spesifyk kin wêze oer syn rendering. As it mooglik is, pleats jo modale HTML op in top-nivo posysje om potinsjele ynterferinsje fan oare eleminten te foarkommen. Jo sille wierskynlik problemen tsjinkomme as jo in .modalbinnen in oar fêst elemint nestelje.
Nochris, fanwegen position: fixed, binne d'r wat behertigingen mei it brûken fan modalen op mobile apparaten. Sjoch ús browser-stipedokuminten foar details.
Troch hoe't HTML5 syn semantyk definiearret, hat it autofocusHTML-attribút gjin effekt yn Bootstrap-modalen. Om itselde effekt te berikken, brûk wat oanpast JavaScript:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Bliuw lêze foar demo's en gebrûksrjochtlinen.

Foarbylden

Hjirûnder is in statysk modaal foarbyld (betsjuttend syn positionen displaybinne oerskreaun). Ynbegrepen binne de modale koptekst, modale lichem (fereaske foar padding), en modale fuottekst (opsjoneel). Wy freegje dat jo, wannear mooglik, modale kopteksten opnimme mei ûntslachaksjes, of in oare eksplisite ûntslachaksje leverje.

<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

Skeakelje in wurkjende modale demo troch te klikken op de knop hjirûnder. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.

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

Statyske eftergrûn

As eftergrûn is ynsteld op statysk, sil de modale net slute as jo bûten it klikke. Klikje op de knop hjirûnder om it te besykjen.

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

Scrolling lange ynhâld

As modalen te lang wurde foar de viewport of apparaat fan de brûker, rôlje se ûnôfhinklik fan 'e side sels. Besykje de demo hjirûnder om te sjen wat wy bedoele.

Jo kinne ek in scrollbere modal meitsje wêrmei it modale lichem kin rôlje troch ta te foegjen .modal-dialog-scrollableoan .modal-dialog.

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

Fertikaal sintraal

Taheakje .modal-dialog-centeredoan .modal-dialogom de modaal fertikaal te sintrum.

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

Tooltips en popovers

Tooltips en popovers kinne wurde pleatst binnen modals as nedich. As modalen binne sletten, wurde alle tooltips en popovers binnen ek automatysk wegere.

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

Mei help fan it raster

Brûk it Bootstrap-rastersysteem binnen in modaal troch nêst .container-fluidbinnen de .modal-body. Brûk dan de normale rastersysteemklassen lykas jo earne oars soene.

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

Hawwe jo in boskje knoppen dy't allegear deselde modale mei in bytsje ferskillende ynhâld trigger? Brûk event.relatedTargeten HTML- data-bs-*attributen om de ynhâld fan 'e modale te feroarjen ôfhinklik fan hokker knop waard oanklikt.

Hjirûnder is in live demo folge troch foarbyld HTML en JavaScript. Foar mear ynformaasje, lês de modale eveneminten docs foar details oer 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
})

Skeakelje tusken modalen

Skeakelje tusken meardere modals mei wat tûke pleatsing fan de data-bs-targeten data-bs-toggleattributen. Jo kinne bygelyks in modal foar reset fan wachtwurd wikselje fanút in al iepen oanmeldmodaal. Tink derom dat meardere modalen net tagelyk iepen kinne wêze - dizze metoade skeakelt gewoan tusken twa aparte modalen.

Iepenje earste modal

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>

Feroarje animaasje

De $modal-fade-transformfariabele bepaalt de transformaasjetastân fan .modal-dialogfoar de modale fade-in-animaasje, de $modal-show-transformfariabele bepaalt de transformaasje fan .modal-dialogoan 'e ein fan' e modale fade-in-animaasje.

As jo bygelyks in ynzoomen-animaasje wolle, kinne jo ynstelle $modal-fade-transform: scale(.8).

Fuortsmite animaasje

Foar modalen dy't gewoan ferskine ynstee fan ferdwine om te besjen, ferwiderje de .fadeklasse fan jo modale markup.

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

Dynamyske hichten

As de hichte fan in modal feroaret wylst it iepen is, moatte jo skilje myModal.handleUpdate()om de posysje fan 'e modal opnij oan te passen foar it gefal dat in skúfbalke ferskynt.

Tagonklikheid

Wês wis dat jo tafoegje aria-labelledby="...", ferwizend nei de modale titel, oan .modal. Derneist kinne jo in beskriuwing jaan fan jo modale dialooch mei aria-describedbyop .modal. Tink derom dat jo it net hoege ta te foegjen role="dialog", om't wy it al tafoegje fia JavaScript.

Ynbêde YouTube-fideo's

Ynbêde fan YouTube-fideo's yn modalen fereasket ekstra JavaScript net yn Bootstrap om automatysk ôfspieljen en mear te stopjen. Sjoch dizze nuttige Stack Overflow-post foar mear ynformaasje.

Opsjonele maten

Modals hawwe trije opsjoneel maten, beskikber fia modifier klassen wurde pleatst op in .modal-dialog. Dizze maten stappe yn by bepaalde brekpunten om horizontale rôlbalken op smellere werjefteporten te foarkommen.

Grutte	Klasse	Modale maksimale breedte
Lyts	`.modal-sm`	`300px`
Standert	Gjin	`500px`
Grut	`.modal-lg`	`800px`
Ekstra grut	`.modal-xl`	`1140px`

Us standert modale sûnder modifikaasjeklasse foarmet de "medium" grutte modal.

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

In oare oerskriuwing is de opsje om in modaal op te popjen dy't de brûker viewport beslacht, beskikber fia modifierklassen dy't pleatst wurde op in .modal-dialog.

Klasse	Beskikberens
`.modal-fullscreen`	Altyd
`.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

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende CSS-fariabelen oanpak, brûke modalen no lokale CSS-fariabelen op .modalen .modal-backdropfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$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 fariabelen

$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

Responsive modals op folslein skerm wurde generearre fia de $breakpointskaart en in loop yn 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;
      }
    }
  }
}

Gebrûk

De modale plugin skeakelet jo ferburgen ynhâld op oanfraach, fia gegevensattributen of JavaScript. It oerskriuwt ek standert rôljegedrach en genereart in .modal-backdropom in klikgebiet te jaan foar it ôfwizen fan sjen litten modalen as jo bûten de modale klikke.

Fia data attributen

Toggle

Aktivearje in modaal sûnder JavaScript te skriuwen. Set data-bs-toggle="modal"op in controller-elemint, lykas in knop, tegearre mei in data-bs-target="#foo"of href="#foo"om in spesifike modaal te rjochtsjen om te wikseljen.

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

ôfwize

Untslach kin berikt wurde mei it dataattribút op in knop binnen de modale lykas hjirûnder oantoand:

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

of op in knop bûten de modal mei de data-bs-targetlykas hjirûnder oanjûn:

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

Wylst beide manieren om in modaal te ûntslaan wurde stipe, hâld dan yn gedachten dat it ûntslaan fan bûten in modaal net oerienkomt mei it dialooch (modaal) patroan fan ARIA Authoring Practices Guide . Doch dit op jo eigen risiko.

Fia JavaScript

Meitsje in modal mei ien line fan JavaScript:

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

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Namme	Type	Standert	Beskriuwing
`backdrop`	boolean,`'static'`	`true`	Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje `static`foar in eftergrûn dy't de modaal net slút as jo op klikke.
`focus`	boolean	`true`	Pleatst de fokus op 'e modale as inisjalisearre.
`keyboard`	boolean	`true`	Slút de modale as escape-toets wurdt yndrukt.

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Passing opsjes

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Metoade	Beskriuwing
`dispose`	Ferneatiget in elemint syn modal. (Ferwidert bewarre gegevens op it DOM-elemint)
`getInstance`	Statyske metoade wêrmei jo de modale eksimplaar kinne krije ferbûn mei in DOM-elemint.
`getOrCreateInstance`	Statyske metoade wêrmei jo de modale eksimplaar kinne krije dy't ferbûn is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is.
`handleUpdate`	Pas de posysje fan 'e modal mei de hân oan as de hichte fan in modal feroaret wylst it iepen is (dus yn it gefal dat in rôlbalke ferskynt).
`hide`	Ferberget in modaal mei de hân. Keart werom nei de beller foardat de modal eins ferburgen is (dus foardat it `hidden.bs.modal`barren bart).
`show`	Iepenet in modaal mei de hân. Keart werom nei de beller foardat de modal wirklik werjûn is (dus foardat it `shown.bs.modal`evenemint bart). Jo kinne ek in DOM-elemint trochjaan as in argumint dat kin wurde ûntfongen yn 'e modale eveneminten (as it `relatedTarget`eigendom). (ie `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Wizigje manuell in modaal. Keart werom nei de beller foardat de modal feitlik werjûn of ferburgen is (dat wol sizze foardat it `shown.bs.modal`of `hidden.bs.modal`barren bart).

Eveneminten

De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit. Alle modale eveneminten wurde ûntslein op 'e modal sels (dus by de <div class="modal">).

Barren	Beskriuwing
`hide.bs.modal`	Dit barren wurdt fuortendaliks ûntslein as de `hide`eksimplaarmetoade oanroppen is.
`hidden.bs.modal`	Dit evenemint wurdt ûntslein as de modal klear is mei ferburgen te wurden foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
`hidePrevented.bs.modal`	Dit evenemint wurdt ûntslein as de modal wurdt toand, de eftergrûn is `static`en in klik bûten de modal wurdt útfierd. It evenemint wurdt ek ûntslein as de escape-toets yndrukt wurdt en de `keyboard`opsje is ynsteld op `false`.
`show.bs.modal`	Dit evenemint fjoer fuortendaliks as de `show`eksimplaar metoade wurdt oanroppen. As feroarsake troch in klik, is it oanklikte elemint beskikber as `relatedTarget`eigendom fan it evenemint.
`shown.bs.modal`	Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). As feroarsake troch in klik, is it oanklikte elemint beskikber as `relatedTarget`eigendom fan it evenemint.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})