Modal

Siv Bootstrap's JavaScript modal plugin ntxiv dialogs rau koj qhov chaw rau lightboxes, neeg siv cov ntawv ceeb toom, lossis cov ntsiab lus kev cai tag nrho.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Ua ntej pib nrog Bootstrap's modal tivthaiv, nco ntsoov nyeem cov hauv qab no raws li peb cov kev xaiv zaub mov tsis ntev los no tau hloov.

Modals yog tsim nrog HTML, CSS, thiab JavaScript. Lawv nyob nraum positioned tshaj txhua yam nyob rau hauv cov ntaub ntawv thiab tshem tawm scroll los ntawm lub <body>thiaj li hais tias modal cov ntsiab lus scrolls hloov.
Nyem rau ntawm lub modal "backdrop" yuav cia li kaw lub modal.
Bootstrap tsuas txhawb ib lub qhov rais modal ib zaug. Nested modals tsis txaus siab vim peb ntseeg tias lawv yog cov neeg siv tsis zoo.
Modals siv position: fixed, uas qee zaum tuaj yeem yog qhov tshwj xeeb ntawm nws qhov kev ua haujlwm. Thaum twg ua tau, tso koj cov HTML modal rau hauv qhov chaw sab saum toj kom tsis txhob muaj kev cuam tshuam los ntawm lwm cov ntsiab lus. Koj yuav muaj peev xwm khiav mus rau hauv cov teeb meem thaum nesting ib .modalnyob rau hauv lwm yam khoom ruaj.
Ib zaug ntxiv, vim position: fixed, muaj qee qhov caveats nrog kev siv modals ntawm mobile pab kiag li lawm. Saib peb cov ntaub ntawv txhawb nqa browser kom paub meej.
Vim li cas HTML5 txhais nws cov semantics, HTML tus cwj pwm tsisautofocus muaj txiaj ntsig hauv Bootstrap modals. Txhawm rau ua tiav cov txiaj ntsig zoo ib yam, siv qee qhov kev cai JavaScript:

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

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

Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Khaws nyeem rau demos thiab cov lus qhia siv.

Piv txwv

Hauv qab no yog ib qho piv txwv zoo li qub (lub ntsiab lus nws positionthiab displaytau dhau los). Xws li yog lub taub hau modal, modal lub cev (yuav tsum tau rau padding), thiab modal footer (yeem). Peb thov kom koj suav nrog cov ntsiab lus ntawm kev tso tawm thaum twg los tau, lossis muab lwm qhov kev tso tawm kom pom tseeb.

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

Nyob demo

Toggle ib tug ua hauj lwm modal demo los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.

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

Thaum backdrop yog teem rau zoo li qub, lub modal yuav tsis kaw thaum nias sab nraum nws. Nyem lub pob hauv qab no sim nws.

<!-- 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 cov ntsiab lus ntev

Thaum modals ntev dhau los rau tus neeg siv qhov chaw saib lossis ntaus ntawv, lawv scroll ywj siab ntawm nplooj ntawv nws tus kheej. Sim cov demo hauv qab no kom pom tias peb txhais li cas.

Koj tuaj yeem tsim tau ib qho scrollable modal uas tso cai rau scroll lub modal lub cev los ntawm kev ntxiv .modal-dialog-scrollablerau .modal-dialog.

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

Vertical centered

Ntxiv .modal-dialog-centeredmus .modal-dialograu vertically center lub 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>

Cov lus qhia thiab popovers

Cov lus qhia thiab popovers tuaj yeem muab tso rau hauv modals raws li xav tau. Thaum cov modals raug kaw, txhua yam lus qhia thiab cov popovers nyob rau hauv kuj raug tso tseg.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" 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="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Siv daim phiaj

Siv lub Bootstrap kab sib chaws nyob rau hauv ib tug modal los ntawm nesting .container-fluidnyob rau hauv lub .modal-body. Tom qab ntawd, siv cov chav kawm kab ke ib txwm ua raws li koj xav tau nyob txhua qhov chaw.

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

Muaj ib pawg ntawm cov nyees khawm uas txhua tus ua rau tib lub modal nrog cov ntsiab lus sib txawv me ntsis? Siv event.relatedTargetthiab HTML data-bs-*tus cwj pwm kom sib txawv ntawm cov ntsiab lus ntawm lub modal nyob ntawm seb lub pob twg raug nias.

Hauv qab no yog qhov ua yeeb yaj kiab nyob ua raws li piv txwv HTML thiab JavaScript. Yog xav paub ntxiv, nyeem cov txheej xwm modal docs kom paub meej txog relatedTarget.

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

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var 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.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Toggle ntawm modals

Toggle ntawm ntau modals nrog qee qhov kev tso kawm ntse ntawm cov khoom data-bs-targetthiab data-bs-togglecov cwj pwm. Piv txwv li, koj tuaj yeem toggle tus password reset modal los ntawm hauv qhov qhib kos npe rau hauv modal. Thov nco ntsoov ntau modals tsis tuaj yeem qhib tib lub sijhawm - txoj kev no tsuas yog toggles ntawm ob qhov sib txawv modals.

Qhib thawj modal

<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" data-bs-dismiss="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" data-bs-dismiss="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>

Hloov cov animation

Qhov $modal-fade-transformsib txawv txiav txim siab hloov lub xeev ntawm .modal-dialogua ntej modal ploj-hauv animation, qhov $modal-show-transformsib txawv txiav txim siab hloov pauv ntawm .modal-dialogqhov kawg ntawm modal fade-in animation.

Yog tias koj xav tau piv txwv zoom-hauv animation, koj tuaj yeem teeb tsa $modal-fade-transform: scale(.8).

Tshem cov animation

Rau cov qauv uas tsuas yog tshwm sim ntau dua li ploj mus saib, tshem tawm cov .fadechav kawm los ntawm koj cov ntawv cim modal.

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

Dynamic qhov siab

Yog hais tias qhov siab ntawm ib qho kev hloov pauv thaum nws qhib, koj yuav tsum hu myModal.handleUpdate()mus kho lub modal txoj hauj lwm nyob rau hauv cov ntaub ntawv ib tug scrollbar tshwm.

Kev siv tau

Nco ntsoov ntxiv aria-labelledby="...", xa mus rau lub npe modal, rau .modal. Tsis tas li ntawd, koj tuaj yeem muab cov lus piav qhia ntawm koj lub modal dialog nrog aria-describedbyrau ntawm .modal. Nco ntsoov tias koj tsis tas yuav ntxiv role="dialog"vim peb twb ntxiv nws ntawm JavaScript.

Embedding YouTube yeeb yaj duab

Embedding YouTube yeeb yaj duab nyob rau hauv modals yuav tsum tau ntxiv JavaScript tsis nyob rau hauv Bootstrap kom cia li nres playback thiab ntau dua. Saib qhov pab tau Stack Overflow ncej kom paub ntau ntxiv.

Xaiv qhov ntau thiab tsawg

Modals muaj peb qhov ntau thiab tsawg, muaj nyob ntawm cov chav kawm hloov kho kom muab tso rau ntawm ib qho .modal-dialog. Cov qhov loj me no ncaws tawm ntawm qee qhov chaw nres tsheb kom tsis txhob muaj kab rov tav scrollbars ntawm qhov chaw nqaim.

Loj	Chav kawm	Modal max-dav
Me me	`.modal-sm`	`300px`
Default	Tsis muaj	`500px`
Loj	`.modal-lg`	`800px`
Ntxiv loj	`.modal-xl`	`1140px`

Peb default modal yam tsis muaj kev hloov kho chav kawm yog qhov "nruab nrab" modal.

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

Lwm qhov override yog qhov kev xaiv pop up modal uas npog cov neeg siv qhov chaw saib, muaj nyob ntawm cov chav kawm hloov kho uas tau muab tso rau hauv .modal-dialog.

Chav kawm	Muaj
`.modal-fullscreen`	Ib txwm
`.modal-fullscreen-sm-down`	Hauv qab no`576px`
`.modal-fullscreen-md-down`	Hauv qab no`768px`
`.modal-fullscreen-lg-down`	Hauv qab no`992px`
`.modal-fullscreen-xl-down`	Hauv qab no`1200px`
`.modal-fullscreen-xxl-down`	Hauv qab no`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Hloov pauv

$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:        rgba($black, .2);
$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:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-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-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

Teb puv npo modals yog tsim los ntawm $breakpointsdaim ntawv qhia thiab lub voj hauv 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 {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Kev siv

Lub modal plugin toggles koj zais cov ntsiab lus ntawm kev thov, ntawm cov ntaub ntawv cwj pwm lossis JavaScript. Nws tseem overrides default scrolling cwj pwm thiab tsim ib tug .modal-backdroplos muab ib tug nias cheeb tsam rau dismissing qhia modals thaum txhaj sab nraum lub modal.

Los ntawm cov ntaub ntawv attributes

Qhib lub modal yam tsis tau sau JavaScript. Teem data-bs-toggle="modal"rau ntawm tus tswj lub caij, zoo li lub pob, nrog rau ib data-bs-target="#foo"lossis href="#foo"rau lub hom phiaj rau ib qho kev hloov pauv.

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

Ntawm JavaScript

Tsim ib qho modal nrog ib kab ntawm JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-, xws li hauv data-bs-backdrop="".

Lub npe	Hom	Default	Kev piav qhia
`backdrop`	boolean los yog txoj hlua`'static'`	`true`	Xws li ib qho modal-backdrop element. Xwb, qhia meej `static`rau ib qho backdrop uas tsis kaw lub modal ntawm nias.
`keyboard`	boolean	`true`	Kaw lub modal thaum khiav qhov tseem ceeb yog nias
`focus`	boolean	`true`	Muab qhov tsom mus rau lub modal thaum pib.

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Hla kev xaiv

Activates koj cov ntsiab lus raws li ib tug modal. Txais ib qho kev xaiv xaiv object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

toggle

Manually toggles ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim los yog zais (piv txwv li ua ntej qhov shown.bs.modalkev hidden.bs.modaltshwm sim tshwm sim).

myModal.toggle()

ua yeeb yam

Manually qhib lub modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.modalkev tshwm sim tshwm sim).

myModal.show()

Tsis tas li ntawd, koj tuaj yeem dhau lub ntsiab lus DOM raws li kev sib cav uas tuaj yeem tau txais hauv cov xwm txheej modal (raws li cov relatedTargetcuab yeej).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

zais

Manually hides ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.modalxwm txheej tshwm sim).

myModal.hide()

handleUpdate

Manually readjust lub modal txoj hauj lwm yog hais tias qhov siab ntawm ib tug modal hloov thaum nws qhib (piv txwv li nyob rau hauv cov ntaub ntawv ib tug scrollbar tshwm).

myModal.handleUpdate()

pov tseg

Destroys an element’s modal. (Removes stored data on the DOM element)

myModal.dispose()

getInstance

Static method which allows you to get the modal instance associated with a DOM element

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

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 initialised

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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 type	Description
`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`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). Yog hais tias tshwm sim los ntawm ib tug nias, lub clicked caij yog muaj raws li cov `relatedTarget`cuab yeej ntawm qhov kev tshwm sim.
`hide.bs.modal`	Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum `hide`hu ua piv txwv txoj kev.
`hidden.bs.modal`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
`hidePrevented.bs.modal`	Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tshwm sim, nws cov backdrop yog `static`thiab ib tug nias sab nraum lub modal los yog ib tug khiav ceev xovxwm yog ua nrog cov keyboard xaiv los yog `data-bs-keyboard`teem rau `false`.

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