Modal

Gunakake plugin modal JavaScript Bootstrap kanggo nambah dialog menyang situs sampeyan kanggo kothak lampu, kabar pangguna, utawa konten khusus.

Ing kaca iki

Cara kerjane

Sadurunge miwiti komponen modal Bootstrap, priksa manawa maca ing ngisor iki amarga pilihan menu kita bubar diganti.

Modal dibangun nganggo HTML, CSS, lan JavaScript. Lagi dipanggonke liwat kabeh liya ing document lan mbusak gulung saka <body>supaya isi modal nggulung tinimbang.
Ngeklik ing "latar mburi" modal bakal kanthi otomatis nutup modal.
Bootstrap mung ndhukung siji jendhela modal ing siji wektu. Modal bersarang ora didhukung amarga kita percaya yen pengalaman pangguna sing ala.
Modals nggunakake position: fixed, kang kadhangkala bisa dadi dicokot tartamtu bab sawijining rendering. Yen bisa, selehake HTML modal sampeyan ing posisi paling dhuwur supaya ora ana gangguan saka unsur liyane. Sampeyan kamungkinan bakal nemu masalah nalika nesting .modaling unsur tetep liyane.
Sawise maneh, amarga position: fixed, ana sawetara caveats karo nggunakake modal ing piranti seluler. Deleng dokumen dhukungan browser kita kanggo rincian.
Amarga carane HTML5 nemtokake semantik, atribut autofocusHTML ora duwe pengaruh ing modals Bootstrap. Kanggo entuk efek sing padha, gunakake sawetara JavaScript khusus:

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

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

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tansah maca kanggo demo lan pedoman panggunaan.

Tuladha

Ing ngisor iki minangka conto modal statisposition (tegese lan displaywis diganti). Kalebu header modal, awak modal (dibutuhake kanggo padding), lan footer modal (opsional). Dijaluk supaya sampeyan nyakup header modal kanthi tumindak ngilangi yen bisa, utawa menehi tumindak ngilangi eksplisit liyane.

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

demo langsung

Ganti demo modal kerja kanthi ngeklik tombol ing ngisor iki. Bakal geser mudhun lan luntur saka ndhuwur kaca.

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

Latar mburi statis

Nalika latar mburi disetel menyang statis, modal ora bakal ditutup nalika ngeklik ing njaba. Klik tombol ing ngisor iki kanggo nyoba.

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

Nggulung isi dawa

Nalika modals dadi dawa banget kanggo viewport pangguna utawa piranti, padha nggulung dhewe saka kaca dhewe. Coba demo ing ngisor iki kanggo ndeleng apa tegese.

Sampeyan uga bisa nggawe modal sing bisa digulung sing ngidini nggulung awak modal kanthi .modal-dialog-scrollablenambahake .modal-dialog.

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

Vertikal tengah

Tambah .modal-dialog-centeredmenyang .modal-dialogvertikal tengah modal.

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

Tooltips lan popovers bisa diselehake ing modals yen perlu. Nalika modal ditutup, sembarang tooltips lan popovers ing uga otomatis mecat.

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

Nggunakake kothak

Gunakake sistem kothak Bootstrap ing modal kanthi nesting .container-fluiding .modal-body. Banjur, gunakake kelas sistem kothak normal kaya ing ngendi wae.

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

Duwe akeh tombol sing kabeh micu modal sing padha karo isi sing rada beda? Gunakake event.relatedTargetlan atribut HTMLdata-bs-* kanggo macem-macem isi modal gumantung tombol sing diklik.

Ing ngisor iki ana demo langsung sing diikuti conto HTML lan JavaScript. Kanggo informasi luwih lengkap, waca docs acara modal kanggo rincian ing 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
})

Ngalih ing antarane modal

Ngalih ing antarane macem-macem modal kanthi sawetara penempatan sing pinter data-bs-targetlan data-bs-toggleatribut. Contone, sampeyan bisa ngalih modal ngreset tembung sandhi saka modal mlebu sing wis mbukak. Wigati dimangerteni manawa macem-macem modal ora bisa dibukak bebarengan - cara iki mung ganti ing antarane rong modal sing kapisah.

Bukak modal pisanan

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>

Ngganti animasi

Variabel $modal-fade-transformnemtokake kahanan transformasi .modal-dialogsadurunge animasi fade-in modal, $modal-show-transformvariabel nemtokake transformasi .modal-dialoging pungkasan animasi fade-in modal.

Yen sampeyan pengin contone animasi zoom-in, sampeyan bisa nyetel $modal-fade-transform: scale(.8).

Mbusak animasi

Kanggo modals sing mung katon tinimbang fade kanggo ndeleng, mbusak .fadekelas saka markup modal.

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

Dhuwur dinamis

Yen dhuwur saka modal diganti nalika mbukak, sampeyan kudu nelpon myModal.handleUpdate()kanggo nyetel maneh posisi modal ing kasus scrollbar katon.

Aksesibilitas

Dadi manawa kanggo nambah aria-labelledby="...", referensi judhul modal, kanggo .modal. Kajaba iku, sampeyan bisa menehi katrangan babagan dialog modal karo aria-describedbyon .modal. Elinga yen sampeyan ora perlu nambah role="dialog"amarga kita wis nambah liwat JavaScript.

Semat video YouTube

Semat video YouTube ing modals mbutuhake JavaScript tambahan ora ing Bootstrap kanggo otomatis mungkasi muter maneh lan liyane. Deleng kiriman Stack Overflow sing migunani iki kanggo informasi luwih lengkap.

Ukuran opsional

Modal duwe telung ukuran opsional, kasedhiya liwat kelas modifier kanggo diselehake ing a .modal-dialog. Ukuran kasebut diwiwiti ing breakpoints tartamtu kanggo ngindhari scrollbar horisontal ing viewports sing luwih sempit.

Ukuran	kelas	Modal max-jembaré
Cilik	`.modal-sm`	`300px`
Default	ora ana	`500px`
Gedhe	`.modal-lg`	`800px`
Ekstra gedhe	`.modal-xl`	`1140px`

Modal standar kita tanpa kelas modifier minangka modal ukuran "sedheng".

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

Liyane override pilihan kanggo pop munggah modal sing isine viewport pangguna, kasedhiya liwat kelas modifier sing diselehake ing .modal-dialog.

kelas	kasedhiyan
`.modal-fullscreen`	tansah
`.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

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, modal saiki nggunakake variabel CSS lokal .modallan .modal-backdropkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

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

Variabel Sass

$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

Modalitas layar wutuh responsif digawe liwat $breakpointspeta lan daur ulang ing 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;
      }
    }
  }
}

Panggunaan

Plugin modal ngganti konten sing didhelikake yen dikarepake, liwat atribut data utawa JavaScript. Iku uga overrides standar nggulung prilaku lan njedulake a .modal-backdropkanggo nyedhiyani area klik kanggo ngilangi modals ditampilake nalika ngeklik njaba modal.

Liwat atribut data

Ngalih

Aktifake modal tanpa nulis JavaScript. Setel data-bs-toggle="modal"ing unsur controller, kaya tombol, bebarengan karo data-bs-target="#foo"utawa href="#foo"kanggo target modal tartamtu kanggo ngalih.

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

Mbucal

Pembubaran bisa digayuh kanthi dataatribut ing tombol ing modal kaya sing dituduhake ing ngisor iki:

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

utawa ing tombol ing njaba modal nggunakake data-bs-targetkaya sing dituduhake ing ngisor iki:

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

Nalika loro cara kanggo ngilangi modal didhukung, elinga yen ngilangi saka njaba modal ora cocog karo pola dialog (modal) Pandhuan Praktik Penulisan ARIA . Tindakake iki kanthi resiko dhewe.

Liwat JavaScript

Nggawe modal karo siji baris JavaScript:

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

Pilihan

Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.

jeneng	Jinis	Default	Katrangan
`backdrop`	boolean,`'static'`	`true`	Kalebu unsur modal-backdrop. Utawa, nemtokake `static`latar mburi sing ora nutup modal nalika diklik.
`focus`	boolean	`true`	Nempatno fokus ing modal nalika initialized.
`keyboard`	boolean	`true`	Nutup modal nalika tombol uwal ditekan.

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

Pilihan liwat

Ngaktifake konten sampeyan minangka modal. Nampa opsi opsional object.

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

Metode	Katrangan
`dispose`	Ngancurake modal unsur. (Mbusak data sing disimpen ing unsur DOM)
`getInstance`	Cara statis sing ngidini sampeyan entuk conto modal sing ana gandhengane karo unsur DOM.
`getOrCreateInstance`	Cara statis sing ngidini sampeyan entuk conto modal sing digandhengake karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.
`handleUpdate`	Ngatur maneh posisi modal kanthi manual yen dhuwure modal diganti nalika mbukak (umpamane yen ana scrollbar katon).
`hide`	Kanthi manual ndhelikake modal. Bali menyang panelpon sadurunge modal bener-bener didhelikake (yaiku sadurunge `hidden.bs.modal`kedadeyan kasebut).
`show`	Mbukak modal kanthi manual. Bali menyang panelpon sadurunge modal wis bener wis ditampilake (ie sadurunge `shown.bs.modal`acara occurs). Uga, sampeyan bisa ngliwati unsur DOM minangka argumen sing bisa ditampa ing acara modal (minangka `relatedTarget`properti). (ie `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Ngalih modal kanthi manual. Bali menyang panelpon sadurunge modal wis bener ditampilake utawa didhelikake (yaiku sadurunge acara `shown.bs.modal`utawa `hidden.bs.modal`kedadeyan).

Acara

Kelas modal Bootstrap nyedhiyakake sawetara acara kanggo nyambung menyang fungsionalitas modal. Kabeh acara modal dipecat ing modal dhewe (ie ing <div class="modal">).

Acara	Katrangan
`hide.bs.modal`	Acara iki langsung dipecat nalika `hide`metode conto wis diarani.
`hidden.bs.modal`	Acara iki dipecat nalika modal wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
`hidePrevented.bs.modal`	Acara iki dipecat nalika modal ditampilake, latar `static`mburi lan klik ing njaba modal ditindakake. Acara uga dipecat nalika tombol uwal dipencet lan `keyboard`pilihan disetel kanggo `false`.
`show.bs.modal`	Acara iki langsung murub nalika `show`metode conto diarani. Yen disebabake klik, unsur sing diklik kasedhiya minangka `relatedTarget`properti acara kasebut.
`shown.bs.modal`	Acara iki dipecat nalika modal wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung). Yen disebabake klik, unsur sing diklik kasedhiya minangka `relatedTarget`properti acara kasebut.

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