Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Modal

Gamitin ang JavaScript modal plugin ng Bootstrap upang magdagdag ng mga dialog sa iyong site para sa mga lightbox, notification ng user, o ganap na custom na content.

Sa pahinang ito

Paano ito gumagana

Bago magsimula sa modal component ng Bootstrap, siguraduhing basahin ang mga sumusunod dahil ang aming mga opsyon sa menu ay nagbago kamakailan.

  • Ang mga modal ay binuo gamit ang HTML, CSS, at JavaScript. Ang mga ito ay nakaposisyon sa lahat ng iba pa sa dokumento at alisin ang scroll mula sa <body>upang ang modal na nilalaman ay mag-scroll sa halip.
  • Ang pag-click sa modal na "backdrop" ay awtomatikong isasara ang modal.
  • Sinusuportahan lamang ng Bootstrap ang isang modal window sa isang pagkakataon. Hindi sinusuportahan ang mga nested modal dahil naniniwala kami na ang mga ito ay hindi magandang karanasan ng user.
  • Ginagamit ang mga modal position: fixed, na kung minsan ay medyo partikular sa pag-render nito. Hangga't maaari, ilagay ang iyong modal HTML sa isang top-level na posisyon upang maiwasan ang potensyal na interference mula sa iba pang mga elemento. Malamang na magkakaroon ka ng mga isyu kapag nag-nest ng isang sa .modalloob ng isa pang nakapirming elemento.
  • Muli, dahil sa position: fixed, may ilang mga caveat sa paggamit ng mga modal sa mga mobile device. Tingnan ang aming browser support docs para sa mga detalye.
  • Dahil sa kung paano tinukoy ng HTML5 ang mga semantika nito, ang autofocusHTML attribute ay walang epekto sa Bootstrap modals. Upang makamit ang parehong epekto, gumamit ng ilang custom na JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Panatilihin ang pagbabasa para sa mga demo at mga alituntunin sa paggamit.

Mga halimbawa

Nasa ibaba ang isang static na halimbawa ng modal (ibig sabihin nito positionat displayna-override na). Kasama ang modal header, modal body (kinakailangan para sa padding), at modal footer (opsyonal). Hinihiling namin na isama mo ang mga modal header na may mga pagkilos na i-dismiss hangga't maaari, o magbigay ng isa pang tahasang pagkilos sa pag-dismiss.

Pamagat ng modal

Napupunta dito ang text ng modal body.

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

I-toggle ang gumaganang modal demo sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.

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

Static na backdrop

Kapag nakatakda ang backdrop sa static, hindi magsasara ang modal kapag nag-click sa labas nito. I-click ang button sa ibaba upang subukan ito.

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

Pag-scroll ng mahabang nilalaman

Kapag masyadong mahaba ang mga modal para sa viewport o device ng user, nag-i-scroll sila nang hiwalay sa mismong page. Subukan ang demo sa ibaba upang makita kung ano ang ibig naming sabihin.

Maaari ka ring gumawa ng scrollable modal na nagbibigay-daan sa pag-scroll sa modal body sa pamamagitan ng pagdaragdag .modal-dialog-scrollablesa .modal-dialog.

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

Patayong nakasentro

Idagdag .modal-dialog-centeredsa .modal-dialogpatayo na igitna ang 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>

Mga tooltip at popover

Ang mga tooltip at popover ay maaaring ilagay sa loob ng mga modal kung kinakailangan. Kapag isinara ang mga modal, awtomatikong dini-dismiss din ang anumang tooltip at popover sa loob.

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

Gamit ang grid

Gamitin ang Bootstrap grid system sa loob ng isang modal sa pamamagitan ng pagpupugad sa .container-fluidloob ng .modal-body. Pagkatapos, gamitin ang normal na mga klase ng sistema ng grid gaya ng gagawin mo saanman.

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

Pag-iiba-iba ng nilalaman ng modal

May isang grupo ng mga pindutan na lahat ay nagpapalitaw ng parehong modal na may bahagyang magkakaibang mga nilalaman? Gamitin event.relatedTargetat HTML na mga data-bs-*katangian upang pag-iba-ibahin ang mga nilalaman ng modal depende sa kung aling button ang na-click.

Nasa ibaba ang isang live na demo na sinusundan ng halimbawang HTML at JavaScript. Para sa higit pang impormasyon, basahin ang mga modal event docs para sa mga detalye sa 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
})

Mag-toggle sa pagitan ng mga modal

Mag-toggle sa pagitan ng maraming modal na may ilang matalinong paglalagay ng data-bs-targetat mga data-bs-togglekatangian. Halimbawa, maaari mong i-toggle ang isang modal ng pag-reset ng password mula sa loob ng isang bukas na sign in modal. Pakitandaan na ang maraming modal ay hindi maaaring buksan nang sabay —ang pamamaraang ito ay nagpapalipat-lipat lamang sa pagitan ng dalawang magkahiwalay na modal.

Buksan ang unang 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>

Baguhin ang animation

Tinutukoy $modal-fade-transformng variable ang katayuan ng pagbabago .modal-dialogbago ang animation ng modal fade-in, $modal-show-transformtinutukoy ng variable ang pagbabago ng .modal-dialogsa dulo ng animation ng modal fade-in.

Kung gusto mo halimbawa ng zoom-in na animation, maaari mong itakda ang $modal-fade-transform: scale(.8).

Alisin ang animation

Para sa mga modal na lilitaw lamang sa halip na mawala upang tingnan, alisin ang .fadeklase sa iyong modal markup.

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

Mga dinamikong taas

Kung nagbabago ang taas ng isang modal habang ito ay bukas, dapat kang tumawag myModal.handleUpdate()upang muling ayusin ang posisyon ng modal kung sakaling lumitaw ang isang scrollbar.

Accessibility

Tiyaking idagdag aria-labelledby="..."ang , na tumutukoy sa pamagat ng modal, sa .modal. Bukod pa rito, maaari kang magbigay ng paglalarawan ng iyong modal dialog na may aria-describedbysa .modal. Tandaan na hindi mo na kailangang magdagdag role="dialog"dahil naidagdag na namin ito sa pamamagitan ng JavaScript.

Pag-embed ng mga video sa YouTube

Ang pag-embed ng mga video sa YouTube sa mga modal ay nangangailangan ng karagdagang JavaScript na wala sa Bootstrap upang awtomatikong ihinto ang pag-playback at higit pa. Tingnan ang kapaki-pakinabang na post na ito ng Stack Overflow para sa higit pang impormasyon.

Mga opsyonal na laki

Ang mga modal ay may tatlong opsyonal na laki, na magagamit sa pamamagitan ng mga klase ng modifier na ilalagay sa isang .modal-dialog. Ang mga laki na ito ay nagsisimula sa ilang mga breakpoint upang maiwasan ang mga pahalang na scrollbar sa mas makitid na viewport.

Sukat Klase Modal na max-width
Maliit .modal-sm 300px
Default wala 500px
Malaki .modal-lg 800px
Sobrang laki .modal-xl 1140px

Ang aming default na modal na walang modifier class ay bumubuo ng "medium" size modal.

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

Fullscreen Modal

Ang isa pang override ay ang opsyong mag-pop up ng modal na sumasaklaw sa viewport ng user, na available sa pamamagitan ng mga klase ng modifier na inilalagay sa isang .modal-dialog.

Klase Availability
.modal-fullscreen Laging
.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

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na diskarte sa mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga modal ang mga lokal na variable ng CSS sa .modalat .modal-backdroppara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

$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

Ang mga tumutugong fullscreen modal ay nabuo sa pamamagitan ng $breakpointsmapa at isang loop sa 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;
      }
    }
  }
}

Paggamit

I-toggle ng modal plugin ang iyong nakatagong content on demand, sa pamamagitan ng mga attribute ng data o JavaScript. Ino-override din nito ang default na gawi sa pag-scroll at bumubuo ng .modal-backdropisang lugar ng pag-click para sa pag-dismiss ng mga ipinapakitang modal kapag nagki-click sa labas ng modal.

Sa pamamagitan ng mga katangian ng data

I-toggle

Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.

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

Dismiss

Dismissal can be achieved with the data attribute on a button within the modal as demonstrated below:

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

or on a button outside the modal using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the ARIA Authoring Practices Guide dialog (modal) pattern. Do this at your own risk.

Via JavaScript

Create a modal with a single line of JavaScript:

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

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

Name Type Default Description
backdrop boolean, 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
focus boolean true Puts the focus on the modal when initialized.
keyboard boolean true Closes the modal when escape key is pressed.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Passing options

Activates your content as a modal. Accepts an optional options object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Method Description
dispose Destroys an element’s modal. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the modal instance associated with a DOM element.
getOrCreateInstance Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized.
handleUpdate Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
hide Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
show Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Description
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal This event is fired when the modal is shown, its backdrop is static and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})