Modal

Sèvi ak plugin modal JavaScript Bootstrap pou ajoute dyalòg sou sit ou a pou bwat limyè, notifikasyon itilizatè, oswa kontni konplètman koutim.

Nan paj sa a

Ki jan li fonksyone

Anvan w kòmanse ak eleman modal Bootstrap la, asire w ke ou li sa ki annapre yo paske opsyon meni nou yo te chanje dènyèman.

Modèl yo bati ak HTML, CSS, ak JavaScript. Yo ap pozisyone sou tout lòt bagay nan dokiman an epi retire woulo liv la <body>pou kontni modal woule pito.
Klike sou "backdrop" modal la pral otomatikman fèmen modal la.
Bootstrap sipòte sèlman yon fenèt modal nan yon moman. Modal anbrike yo pa sipòte paske nou kwè yo se eksperyans itilizatè pòv yo.
Modèl itilize position: fixed, ki pafwa ka yon ti jan patikilye sou rann li yo. Chak fwa sa posib, mete HTML modal ou a nan yon pozisyon wo nivo pou evite entèferans potansyèl de lòt eleman. Ou pral gen anpil chans rankontre pwoblèm lè nidifikasyon yon .modalnan yon lòt eleman fiks.
Yon fwa ankò, akòz position: fixed, gen kèk opozisyon ak lè l sèvi avèk modal sou aparèy mobil. Gade dokiman sipò navigatè nou an pou plis detay.
Akòz fason HTML5 defini semantik li yo, atribi autofocusHTML la pa gen okenn efè nan modal Bootstrap. Pou reyalize menm efè a, sèvi ak kèk JavaScript koutim:

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

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

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Kontinye lekti pou demonstrasyon ak direktiv itilizasyon.

Egzanp yo

Anba la a se yon egzanp modal estatikposition (sa vle di li yo ak displayyo te remplacé). Gen ladann header modal la, kò modal (obligatwa pou padding), ak modal footer (si ou vle). Nou mande pou w mete en-tête modal ak aksyon ranvwaye chak fwa sa posib, oswa bay yon lòt aksyon eksplisit ranvwaye.

<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

Aktive yon demonstrasyon modal k ap travay lè w klike sou bouton ki anba a. Li pral glise desann ak fennen soti nan tèt paj la.

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

Fondasyon estatik

Lè seri a mete nan estatik, modal la pa pral fèmen lè klike deyò nan li. Klike sou bouton ki anba a pou eseye li.

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

Defile kontni long

Lè modal yo vin twò long pou fenèt itilizatè a oswa aparèy, yo defile endepandan de paj la li menm. Eseye Demo ki anba a pou wè sa nou vle di.

Ou kapab tou kreye yon modal defilable ki pèmèt defile kò modal la lè w ajoute .modal-dialog-scrollablenan .modal-dialog.

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

Vètikalman santre

Add .modal-dialog-centeredto .modal-dialoga vètikal sant modal la.

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

Konsèy zouti ak popovers

Ti konsèy ak popovers yo ka mete nan modal jan sa nesesè. Lè modal yo fèmen, nenpòt konsèy sou zouti ak popover nan yo tou otomatikman ranvwaye.

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

Sèvi ak kadriyaj la

Sèvi ak sistèm kadriyaj Bootstrap la nan yon modal pa nidifikasyon .container-fluidnan .modal-body. Lè sa a, sèvi ak klas sistèm kadriyaj nòmal yo menm jan ou ta nenpòt lòt kote.

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

Gen yon pakèt bouton ki tout deklanche menm modal la ak kontni yon ti kras diferan? Sèvi event.relatedTargetak ak HTML data-bs-*atribi yo varye sa ki nan modal la depann sou ki bouton yo te klike.

Anba la a se yon Demo ap viv ki te swiv pa egzanp HTML ak JavaScript. Pou plis enfòmasyon, li dokiman evènman modal yo pou plis detay sou 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
})

Chanje ant modal yo

Chanje ant modal miltip ak kèk plasman entelijan nan data-bs-targetak data-bs-toggleatribi yo. Pou egzanp, ou ta ka aktive yon modal reset modpas nan yon siy ki deja louvri nan modal. Tanpri sonje plizyè modal pa ka louvri an menm tan - metòd sa a tou senpleman chanje ant de modal separe.

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

Chanje animasyon

Varyab $modal-fade-transformla detèmine eta transfòmasyon nan .modal-dialoganvan animasyon an fade-in modal, $modal-show-transformvaryab la detèmine transfòmasyon nan .modal-dialognan fen animasyon an fennen modal.

Si ou vle pou egzanp yon animasyon zoom-in, ou ka mete $modal-fade-transform: scale(.8).

Retire animasyon

Pou modal ki tou senpleman parèt olye ke fennen nan yo wè, retire .fadeklas la nan maketing modal ou a.

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

Wotè dinamik

Si wotè yon modal chanje pandan li louvri, ou ta dwe rele myModal.handleUpdate()pou reajiste pozisyon modal la nan ka yon defile parèt.

Aksesiblite

Asire w ou ajoute aria-labelledby="...", referans tit modal la, nan .modal. Anplis de sa, ou ka bay yon deskripsyon dyalòg modal ou a ak aria-describedbysou .modal. Remake byen ke ou pa bezwen ajoute role="dialog"paske nou deja ajoute li atravè JavaScript.

Anrejistre videyo YouTube yo

Anrejistre videyo YouTube nan modal mande pou JavaScript adisyonèl ki pa nan Bootstrap otomatikman sispann lekti ak plis ankò. Gade pòs itil Stack Overflow sa a pou plis enfòmasyon.

Gwosè si ou vle

Modal yo gen twa gwosè opsyonèl, ki disponib atravè klas modifye yo dwe mete sou yon .modal-dialog. Gwosè sa yo choute nan sèten pwen rupture pou fè pou evite ba defile orizontal sou vi ki pi etwat.

Gwosè	Klas	Modal max-lajè
Ti	`.modal-sm`	`300px`
Default	Okenn	`500px`
Gwo	`.modal-lg`	`800px`
Siplemantè gwo	`.modal-xl`	`1140px`

Modal default nou an san klas modifye konstitye modal gwosè "mwayen".

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

Yon lòt override se opsyon pou pòp moute yon modal ki kouvri fenèt itilizatè a, ki disponib atravè klas modifye yo mete sou yon .modal-dialog.

Klas	Disponibilite
`.modal-fullscreen`	Toujou
`.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

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a k ap evolye varyab CSS, modal yo kounye a itilize varyab CSS lokal yo sou .modalak .modal-backdroppou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

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

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

Bouk

Yo pwodwi modal plen ekran repons atravè $breakpointskat la ak yon bouk nan 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;
      }
    }
  }
}

Itilizasyon

Plugin modal la chanje kontni kache ou sou demann, atravè atribi done oswa JavaScript. Li pase tou sou konpòtman defile default ak jenere yon .modal-backdroppou bay yon zòn klike sou pou ranvwaye modal yo montre lè klike deyò modal la.

Via atribi done yo

Baskile

Aktive yon modal san w pa ekri JavaScript. Mete data-bs-toggle="modal"sou yon eleman kontwolè, tankou yon bouton, ansanm ak yon data-bs-target="#foo"oswa href="#foo"pou vize yon modal espesifik pou activer.

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

Ranvwaye

Yo ka reyalize ranvwa ak dataatribi ki sou yon bouton nan modal la jan yo montre pi ba a:

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

oswa sou yon bouton deyò modal la lè l sèvi avèk data-bs-targetjan yo montre anba a:

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

Menmsi tou de fason pou ranvwaye yon modal yo sipòte, sonje ke si w rejte yon modal soti deyò pa matche ak modèl dyalòg (modal) Gid Pratik Otorize ARIA . Fè sa sou pwòp risk ou.

Via JavaScript

Kreye yon modal ak yon sèl liy JavaScript:

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

Opsyon

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Non	Kalite	Default	Deskripsyon
`backdrop`	boolean,`'static'`	`true`	Gen ladann yon eleman modal-backdrop. Altènativman, presize `static`pou yon seri ki pa fèmen modal la lè klike sou.
`focus`	booleyen	`true`	Mete konsantre sou modal la lè inisyalize.
`keyboard`	booleyen	`true`	Fèmen modal la lè yo peze kle chape.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

Opsyon pase

Aktive kontni ou kòm yon modal. Aksepte yon opsyon opsyonèl object.

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

Metòd	Deskripsyon
`dispose`	Detwi modal yon eleman. (Retire done ki estoke sou eleman DOM)
`getInstance`	Metòd estatik ki pèmèt ou jwenn egzanp modal ki asosye ak yon eleman DOM.
`getOrCreateInstance`	Metòd estatik ki pèmèt ou jwenn egzanp modal ki asosye ak yon eleman DOM, oswa kreye yon nouvo nan ka li pa te inisyalize.
`handleUpdate`	Manyèlman reajiste pozisyon modal la si wotè yon modal chanje pandan li ouvri (sa vle di nan ka yon defile parèt).
`hide`	Manyèlman kache yon modal. Retounen bay moun kap rele a anvan modal la te kache (sa vle di anvan `hidden.bs.modal`evènman an rive).
`show`	Manyèlman ouvè yon modal. Retounen bay moun k ap rele a anvan yo montre modal la (sa vle di anvan `shown.bs.modal`evènman an rive). Epitou, ou ka pase yon eleman DOM kòm yon agiman ki ka resevwa nan evènman modal yo (tankou `relatedTarget`pwopriyete a). (sa vle di `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Manyèlman aktive yon modal. Retounen bay moun kap rele a anvan modal la aktyèlman te montre oswa kache (sa vle di anvan evènman `shown.bs.modal`an `hidden.bs.modal`rive).

Evènman

Klas modal Bootstrap a ekspoze kèk evènman pou branche nan fonksyonalite modal. Tout evènman modal yo tire sou modal la li menm (sa vle di nan la <div class="modal">).

Evènman	Deskripsyon
`hide.bs.modal`	Evènman sa a te tire imedyatman lè yo `hide`te rele metòd egzanp lan.
`hidden.bs.modal`	Evènman sa a revoke lè modal la fini kache pou itilizatè a (ap tann pou tranzisyon CSS fini).
`hidePrevented.bs.modal`	Evènman sa a revoke lè yo montre modal la, seri li yo `static`epi yo fè yon klik deyò modal la. Evènman an te tire tou lè yo peze kle chape a epi `keyboard`opsyon an mete sou `false`.
`show.bs.modal`	Evènman sa a dife imedyatman lè yo `show`rele metòd egzanp lan. Si sa te koze pa yon klik, eleman klike la disponib kòm `relatedTarget`pwopriyete evènman an.
`shown.bs.modal`	Evènman sa a revoke lè modal la vin vizib pou itilizatè a (ap tann tranzisyon CSS yo fini). Si sa te koze pa yon klik, eleman klike la disponib kòm `relatedTarget`pwopriyete evènman an.

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