in English

Modal

Jiri ngwa mgbakwunye JavaScript nke Bootstrap ka ịgbakwunye mkparịta ụka na saịtị gị maka igbe ọkụ, ọkwa onye ọrụ, ma ọ bụ ọdịnaya omenala kpamkpam.

Na ibe a

Ka o si arụ ọrụ

Tupu ịmalite na akụrụngwa modal Bootstrap, jide n'aka na ị gụọ ihe ndị a ka nhọrọ nhọrọ anyị agbanweela n'oge na-adịbeghị anya.

Ejiri HTML, CSS, na JavaScript wuo usoro. A na-edowe ha n'ọkwa karịa ihe ọ bụla ọzọ dị na akwụkwọ ahụ wee wepụ akwụkwọ mpịakọta na <body>ya ka ọdịnaya modal wee pịgharịa kama.
Ịpị na modal "backdrop" ga-emechi modal ozugbo.
Bootstrap na-akwado naanị otu windo modal n'otu oge. Anaghị akwado ụdị akwụghị ụgwọ dịka anyị kwenyere na ha abụghị ahụmihe onye ọrụ adịghị mma.
Modals na-eji position: fixed, nke nwere ike mgbe ụfọdụ bụrụ ntakịrị ihe gbasara nsụgharị ya. Mgbe ọ bụla enwere ike, tinye HTML modal gị n'ọkwa dị elu ka ịzenarị ndabichi sitere na ihe ndị ọzọ. O yikarịrị ka ị ga-enwe nsogbu mgbe ị na-etinye ọnụ .modaln'ime ihe ọzọ edoziri.
Ọzọkwa, n'ihi position: fixed, e nwere ụfọdụ caveats na iji modals na mobile ngwaọrụ. Hụ docs nkwado ihe nchọgharị anyị maka nkọwa.
N'ihi ka HTML5 si akọwa semantics ya, àgwà autofocusHTML enweghị mmetụta na Bootstrap modals. Iji nweta otu mmetụta ahụ, jiri ụfọdụ Javascript omenala:

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

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

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Nọgide na-agụ maka ngosi ngosi na ntuziaka ojiji.

Ihe atụ

N'okpuru ebe a bụ ihe atụ modal staticposition (pụtara ya na displaya gafeworo ya). Agụnyere bụ modal nkụnye eji isi mee, modal body (chọrọ maka padding), na modal footer (nhọrọ). Anyị na-arịọ gị ka ịtinye ndị nkụnye eji isi mee ihe na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ ọzọ doro anya.

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

Ihe ngosi dị ndụ

Gbanwee ngosi ngosi na-arụ ọrụ site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

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

Ebe static

Mgbe atọrọ backdrop ka ọ kwụ ọtọ, modal agaghị emechi mgbe ịpị na mpụga ya. Pịa bọtịnụ dị n'okpuru ka ịnwale ya.

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

Na-atụgharị ọdịnaya ogologo

Mgbe modals toro ogologo maka nlele ma ọ bụ ngwaọrụ onye ọrụ, ha na-atụgharị na ibe ahụ n'onwe ya. Gbalịa ngosi n'okpuru ka ịhụ ihe anyị na-ekwu.

Ị nwekwara ike ịmepụta modal mpịakọta nke na-enye ohere ịpịgharịa modal ahụ site na ịgbakwunye .modal-dialog-scrollablena .modal-dialog.

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

gbadoro ụkwụ na kwụ ọtọ

Tinye .modal-dialog-centeredna .modal-dialogn'etiti modal kwụ ọtọ.

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

Ntuziaka ngwaọrụ na popovers

Enwere ike itinye ndụmọdụ na popovers n'ime modal dị ka achọrọ. Mgbe emechiri modal, ndụmọdụ ngwaọrụ ọ bụla na popovers dị n'ime na-ewepụkwa ozugbo.

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

Iji grid

Jiri usoro grid Bootstrap n'ime modal site na itinye akwụ .container-fluidn'ime .modal-body. Mgbe ahụ, jiri klaasị sistemụ grid nkịtị ka ị ga-eme ebe ọ bụla ọzọ.

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

Nwere ụyọkọ bọtịnụ niile na-ebute otu modal nwere ọdịnaya dịtụ iche? Jiri event.relatedTargetna njirimara HTMLdata-bs-* gbanwee ọdịnaya nke modal dabere na bọtịnụ nke pịrị.

N'okpuru ebe a bụ ngosi dị ndụ nke HTML na Javascript na-esote. Maka ozi ndị ọzọ, gụọ ihe omume modal docs maka nkọwa na 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
})

Gbanwee n'etiti modal

Gbanwee n'etiti ọtụtụ modal nwere amamihe pụrụ iche nke ntinye data-bs-targetna data-bs-togglenjirimara. Dịka ọmụmaatụ, ịnwere ike ịgbanwe modal nrụpụta okwuntughe site n'ime modal mbinye aka mepere emepe. Biko mara na enwere ike imeghe ọtụtụ modal n'otu oge - usoro a na-atụgharị n'etiti ụdị abụọ dị iche iche.

Mepee modal mbụ

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

Gbanwee animation

Ndị na $modal-fade-transform-agbanwe agbanwe na-ekpebi ọnọdụ mgbanwe nke .modal-dialogtupu modal fade-na animation, $modal-show-transformmgbanwe na-ekpebi mgbanwe nke .modal-dialogna njedebe nke modal fade-na animation.

Ọ bụrụ na ịchọrọ ọmụmaatụ ihe ngosi mbugharị, ị nwere ike ịtọ $modal-fade-transform: scale(.8).

Wepu ihe nkiri

Maka ụdịdị ndị na-apụta karịa ka ị ga-adaba ka ilele, wepụ .fadeklaasị na akara modal gị.

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

Ogologo dị ike

Ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe, ị ga-akpọ myModal.handleUpdate()maka ịhazigharị ọnọdụ modal ahụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara.

Nnweta

Jide n'aka na ịtinye aria-labelledby="...", na-ezo aka na aha modal, na .modal. Na mgbakwunye, ịnwere ike ịnye nkọwa nke mkparịta ụka modal gị na aria-describedbyna .modal. Mara na ịchọghị ịgbakwunye role="dialog"ebe ọ bụ na anyị tinyegoro ya site na Javascript.

Na-etinye vidiyo YouTube

Ịtinye vidiyo YouTube na ụdịdị chọrọ Javascript agbakwunyere ọ bụghị na Bootstrap ka ọ kwụsị ịkpọghachi na-akpaghị aka na ihe ndị ọzọ. Hụ akwụkwọ ozi Stack Overflow a na-enyere aka maka ozi ndị ọzọ.

Nha nhọrọ

Modal nwere nha nhọrọ atọ, dị site na klaasị modifier ka etinye ya na .modal-dialog. Nha ndị a na-abanye n'ebe nkwụsịtụ ụfọdụ ka ịzenarị akwụkwọ mpịakọta kwụ ọtọ n'ọdụ ụgbọ mmiri dị warara.

Nha	Klas	Modal max-obosara
Obere	`.modal-sm`	`300px`
Ọdabara	Ọ dịghị	`500px`
Nnukwu	`.modal-lg`	`800px`
Nnukwu ibu	`.modal-xl`	`1140px`

Modal ndabara anyị na-enweghị klas modifier bụ modal nha “ọkara”.

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

Nkwụsị ọzọ bụ nhọrọ iji wepụta modal na-ekpuchi ebe nlele onye ọrụ, dị site na klaasị modifier nke etinyere na faịlụ .modal-dialog.

Klas	Nnweta
`.modal-fullscreen`	Mgbe niile
`.modal-fullscreen-sm-down`	N'okpuru`576px`
`.modal-fullscreen-md-down`	N'okpuru`768px`
`.modal-fullscreen-lg-down`	N'okpuru`992px`
`.modal-fullscreen-xl-down`	N'okpuru`1200px`
`.modal-fullscreen-xxl-down`	N'okpuru`1400px`

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

Sass

Mgbanwe

$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

A na-emepụta ụdịdị ihuenyo zuru ezu na-anabata site na $breakpointsmaapụ yana loop na 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);
      }
    }
  }
}

Ojiji

Ngwa mgbakwunye modal na-agbanwe ọdịnaya gị zoro ezo na ọchịchọ, site na njirimara data ma ọ bụ Javascript. Ọ na-ewepụkwa omume mpịachi nke ndabara ma na-ewepụta a .modal-backdropiji nye mpaghara ọpịpị maka ịchụpụ ụdịdị egosiri mgbe ịpị na mpụga modal.

Site na njirimara data

Tụgharịa

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-bs-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-bs-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

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

Wepụ

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị n'ime modal dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ na- abụghị modal na -eji data-bs-targetdị ka egosiri n'okpuru:

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

Ọ bụ ezie na a na-akwado ụzọ abụọ a ga-esi wepụ modal, buru n'uche na ịchụpụ site n'èzí modal adabaghị na WAI-ARIA modal design design . Mee nke a n'ihe egwu nke gị.

Site JavaScript

Mepụta modal nwere otu ahịrị Javascript:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-, dị ka ọ dị na data-bs-backdrop="".

Aha	Ụdị	Ọdabara	Nkọwa
`backdrop`	boolean ma ọ bụ eriri`'static'`	`true`	Na-agụnye ihe modal-backdrop element. Nhọrọ, ezipụta `static`maka backdrop nke na-adịghị emechi modal na pịa.
`keyboard`	boolean	`true`	Na-emechi modal mgbe ịpịrị igodo mgbapụ
`focus`	boolean	`true`	Na-etinye uche na modal mgbe ebido ya.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

Nhọrọ nhọrọ

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

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

tụgharịa

Iji aka na-atụgharị modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal ma ọ bụ zoo (ya bụ tupu ihe omume shown.bs.modalma ọ bụ hidden.bs.modalihe emee).

myModal.toggle()

gosi

Iji aka na-emepe modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal n'ezie (ya bụ tupu shown.bs.modalmmemme emee).

myModal.show()

Ọzọkwa, ị nwere ike ịgafe ihe DOM dị ka arụmụka nwere ike ịnweta na ihe omume modal (dị ka ihe relatedTargetonwunwe).

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

zoo

Iji aka na-ezobe modal. Na-alaghachikwute onye na-akpọ oku tupu ezobe modal ahụ (ya bụ tupu hidden.bs.modalmmemme emee).

myModal.hide()

njikwa emelitere

Jiri aka dozie ọnọdụ modal ma ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe (ya bụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara).

myModal.handleUpdate()

tufuo

Na-emebi ụkpụrụ mmewere. (Na-ewepụ data echekwara na mmewere DOM)

myModal.dispose()

nweta ihe atụ

Usoro static nke na-enye gị ohere ịnweta ihe atụ modal jikọtara ya na ihe DOM

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

nwetaOrCreateInstance

Usoro static nke na-enye gị ohere ịnweta ihe atụ modal jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.

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

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal. A na-achụpụ ihe omume modal na modal n'onwe ya (ya bụ na <div class="modal">).

Ụdị mmemme	Nkọwa
`show.bs.modal`	Ihe omume a na-agba ọkụ ozugbo `show`a na-akpọ usoro ihe atụ. Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka `relatedTarget`ihe nke mmemme ahụ.
`shown.bs.modal`	A na-achụpụ ihe omume a mgbe onye ọrụ mere ka modal ahụ anya (ga-echere mgbanwe CSS ka ọ gwụchaa). Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka `relatedTarget`ihe nke mmemme ahụ.
`hide.bs.modal`	A na-agbapụ ihe omume a ozugbo `hide`a kpọrọ usoro ihe atụ.
`hidden.bs.modal`	A na-achụpụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ modal (ga-echere mgbanwe CSS ka agwụchaa).
`hidePrevented.bs.modal`	A na-agbapụ mmemme a mgbe egosiri modal ahụ, ndabere ya bụ `static`na pịa na mpụga modal ma ọ bụ pịa igodo mgbapụ na-eji nhọrọ ahụigodo ma ọ bụ `data-bs-keyboard`tọọ na `false`.

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