Modal a wɔde di dwuma
Fa Bootstrap JavaScript modal plugin no di dwuma fa nkɔmmɔbɔ ahorow ka wo sait no ho ma kanea nnaka, ɔdefo amanneɛbɔ, anaa nsɛm a wɔahyɛ da ayɛ koraa.
Sɛnea ɛyɛ adwuma
Ansa na wobɛhyɛ aseɛ de Bootstrap no modal component no, hwɛ sɛ wobɛkenkan deɛ ɛdidi soɔ yi ɛfiri sɛ yɛn menu options no asesa nnansa yi ara.
- Wɔde HTML, CSS, ne JavaScript na ɛkyekyere modals. Wɔde wɔn asi biribiara a aka wɔ krataa no mu so na woyi scroll no fi mu
<body>
sɛnea ɛbɛyɛ a modal content scrolls mmom. - Sɛ wobɔ modal “backdrop” no so a, ɛbɛto modal no mu ankasa.
- Bootstrap boa modal window baako pɛ wɔ bere koro mu. Nested modals no nnyɛ mmoa sɛnea yegye di sɛ ɛyɛ osuahu a enye a wɔde di dwuma no.
- Modals de
position: fixed
, a ɛtɔ mmere bi a ebetumi ayɛ pɔtee kakra wɔ ne nkyerɛase ho. Bere biara a ɛbɛyɛ yiye no, fa wo modal HTML no to gyinabea a ɛkorɔn so na woakwati nneɛma afoforo a ebetumi atwitware mu. Ɛda adi sɛ wobɛtu mmirika akɔ nsɛm mu bere a woreyɛ nesting a.modal
wɔ fixed element foforo mu no. - Saa bere yi nso, esiane
position: fixed
, kɔkɔbɔ ahorow bi wɔ hɔ a ɛfa modals a wɔde di dwuma wɔ mobile mfiri ahorow so ho. Hwɛ yɛn browser support docs no ma nsɛm no mu nsɛm. - Esiane sɛnea HTML5 kyerɛkyerɛ ne nkyerɛase mu nti, HTML
autofocus
su no nni nkɛntɛnso biara wɔ Bootstrap modals mu. Sɛ wopɛ sɛ wunya nkɛntɛnso koro no ara a, fa JavaScript bi a wɔahyɛ da ayɛ di dwuma:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
media asɛmmisa no so. Hwɛ
yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .
Kɔ so kenkan ma demos ne akwankyerɛ a wɔde di dwuma.
Nhwɛso ahorow
Modal afã horow
Ase hɔ no yɛ static modal nhwɛso (a ɛkyerɛ sɛ ne position
na display
wɔabɔ so). Nea ɛka ho ne modal header, modal body (a ɛho hia ma padding
), ne modal footer (a wopɛ). Yɛsrɛ sɛ fa modal headers a ɛwɔ dismiss actions ka ho bere biara a ɛbɛyɛ yiye, anaasɛ fa dismiss action foforo a ɛda adi pefee ma.
<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 a ɛwɔ hɔ
Toggle modal demo a ɛreyɛ adwuma denam button a ɛwɔ ase ha no a wobɛma so. Ɛbɛtwetwe akɔ fam na ɛbɛyera afi kratafa no atifi.
<!-- 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 akyi mfonini
Sɛ wɔde backdrop no si static so a, modal no rentoto mu bere a worebɔ wɔ n’akyi no. Klik bɔtn a ɛwɔ ase hɔ no so na sɔ hwɛ.
<!-- 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>
Nsɛm a ɛware a wobɛtwetwe
Sɛ modals no tenten dodo ma ɔdefo no viewport anaa device a, ɛtwetwe a ɛnyɛ krataafa no ankasa. Sɔ demo a ɛwɔ ase ha no hwɛ na hwɛ nea yɛpɛ sɛ yɛka.
Wubetumi nso ayɛ modal a wotumi twetwe a ɛma kwan ma wotumi twetwe modal nipadua no denam ka a wode bɛka ho .modal-dialog-scrollable
no so .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Ɛwɔ mfinimfini gyina hɔ
Fa ka .modal-dialog-centered
ho na .modal-dialog
fa vertically mfinimfini modal no.
<!-- 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>
Nnwinnade ho nsɛm ne popovers
Wobetumi de nnwinnade ho nsɛm ne popovers ahyɛ modals mu sɛnea ɛho hia. Sɛ wɔto modals mu a, adwinnade ho nsɛm biara ne popovers a ɛwɔ mu no nso wɔpow no ara kwa.
<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>
Sɛ wode grid no di dwuma a
Fa Bootstrap grid nhyehyɛe no di dwuma wɔ modal bi mu denam nesting .container-fluid
wɔ .modal-body
. Afei, fa grid system classes a ɛyɛ daa no di dwuma sɛnea wobɛyɛ wɔ baabi foforo biara no.
<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>
Modal nsɛm a egu ahorow
Wowɔ button ahorow bi a ne nyinaa kanyan modal koro no ara a ɛsono emu nsɛm kakra? Fa event.relatedTarget
ne HTML data-bs-*
su ahorow di dwuma de sesa modal no mu nsɛm a egyina bɔtn a wɔakliki so.
Ase hɔ no yɛ live demo a nhwɛso HTML ne JavaScript di akyi. Sɛ wopɛ nsɛm pii a, kenkan modal events docs no ma nsɛm pii fa 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 ntam modals
Toggle ntam modals pii ne binom anifere placement of the data-bs-target
ne data-bs-toggle
attributes. Sɛ nhwɛso no, wubetumi ayɛ toggle password reset modal afi sign a wɔabue dedaw wɔ modal mu. Yɛsrɛ wo hyɛ no nsow sɛ wontumi mmue modals pii bere koro mu —saa kwan yi dannan modal abien a ɛsono emu biara no mu ara kwa.
<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>
Sesa animation no
Nsakraeɛ $modal-fade-transform
no kyerɛ nsakraeɛ tebea a ɛwɔ .modal-dialog
ansa na modal fade-in animation no aba, $modal-show-transform
nsakraeɛ no kyerɛ nsakraeɛ a .modal-dialog
ɛwɔ modal fade-in animation no awieeɛ.
Sɛ wopɛ sɛ nhwɛso no zoom-in animation a, wubetumi ahyɛ $modal-fade-transform: scale(.8)
.
Yi animation no fi hɔ
Sɛ wopɛ modals a ɛda adi kɛkɛ sen sɛ ɛbɛyera akɔ mu ahwɛ a, yi .fade
adesua no fi wo modal markup no mu.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Nneɛma a ɛkorɔn a ɛyɛ nnam
Sɛ modal bi sorokɔ sesa bere a wɔabue a, ɛsɛ sɛ wofrɛ myModal.handleUpdate()
no san siesie modal no gyinabea sɛ ebia scrollbar bi bɛpue a.
Nneɛma a wotumi nya
Hwɛ hu sɛ wode aria-labelledby="..."
, a ɛkyerɛ modal asɛmti no, bɛka .modal
. Bio nso, wobɛtumi de wo modal dialog no ho nkyerɛkyerɛmu ama aria-describedby
wɔ on .modal
. Hyɛ no nsow sɛ enhia sɛ wode ka ho role="dialog"
efisɛ yɛde ka ho dedaw denam JavaScript so.
YouTube video ahorow a wɔde hyɛ mu
YouTube video ahorow a wode bɛhyɛ modals mu no hwehwɛ JavaScript foforo a enni Bootstrap mu na ama woagyae playback no ankasa ne nea ɛkeka ho. Hwɛ Stack Overflow post a ɛboa yi ma nsɛm pii.
Nneɛma akɛse a wubetumi apaw
Modals wɔ akɛseɛ mmiɛnsa a wobɛpaw, a ɛwɔ hɔ denam modifier classes a wɔde bɛto a .modal-dialog
. Saa akɛseɛ yi kick in wɔ breakpoints bi mu sɛdeɛ ɛbɛyɛ a wobɛkwati horizontal scrollbars wɔ viewports teateaa so.
Kɛseɛ | Klaase | Modal max-trɛw |
---|---|---|
Ketewa | .modal-sm |
300px |
Mfiaseɛ | Ɛnyɛ ebiara | 500px |
Kakraa | .modal-lg |
800px |
Nneɛma akɛse a ɛboro so | .modal-xl |
1140px |
Yɛn default modal a enni modifier adesuakuw no yɛ “mfinimfini” kɛse modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal a ɛwɔ screen no nyinaa so
Override foforo ne ɔkwan a wobɛfa so apue modal a ɛkata ɔdefo no hwɛbea so, a ɛwɔ hɔ denam modifier class ahorow a wɔde ahyɛ .modal-dialog
.
Klaase | Nneɛma a ɛwɔ hɔ |
---|---|
.modal-fullscreen |
Berɛ biara |
.modal-fullscreen-sm-down |
Aseɛ576px |
.modal-fullscreen-md-down |
Aseɛ768px |
.modal-fullscreen-lg-down |
Aseɛ992px |
.modal-fullscreen-xl-down |
Aseɛ1200px |
.modal-fullscreen-xxl-down |
Aseɛ1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Nneɛma a Ɛsakra
$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);
Ɛpɔ
Wɔnam $breakpoints
map ne loop a ɛwɔ mu no so na ɛyɛ fullscreen modalsscss/_modal.scss
a ɛyɛ mmuae .
@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);
}
}
}
}
Sɛnea wɔde di dwuma
Modal plugin no dannan wo nsɛm a ahintaw no bere a wɔhwehwɛ no, ɛnam data su anaa JavaScript so. Ɛsan nso bu default scrolling suban so na ɛma a .modal-backdrop
ɛde klik beae ma ma wɔpow modals a wɔakyerɛ bere a klik modal no akyi.
Via data su ahorow so
Fa modal bi yɛ adwuma a wonkyerɛw JavaScript. Fa data-bs-toggle="modal"
si controller element bi so, te sɛ button, ne a data-bs-target="#foo"
anaasɛ href="#foo"
sɛ wode besi modal pɔtee bi so sɛ wobɛdannan.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Ɛdenam JavaScript so
Yɛ modal a ɛwɔ JavaScript line biako:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-
, sɛnea ɛwɔ data-bs-backdrop=""
.
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
backdrop |
boolean anaasɛ ahama no'static' |
true |
Nea ɛka ho ne modal-backdrop element bi. Sɛnea ɛbɛyɛ a, kyerɛ static ma akyigyina a ɛnto modal no mu wɔ klik so. |
keyboard |
boolean ho asɛm | true |
Ɛto modal no mu bere a wɔabɔ escape key no |
focus |
boolean ho asɛm | true |
Fa adwene si modal no so bere a wɔahyɛ ase no. |
Akwan a wɔfa so yɛ
Asynchronous akwan ne nsakrae ahorow
API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .
Nneɛma a wobetumi apaw a wɔde twam
Ɛma wo nsɛm no yɛ adwuma sɛ modal. Gye akwan a wubetumi apaw bi tom object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle no
Nsaano toggles a modal. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ modal no ankasa anaa wɔde asie (kyerɛ sɛ ansa na shown.bs.modal
anaa hidden.bs.modal
adeyɛ no aba).
myModal.toggle()
da no adi
Nsaano bue modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔada modal no adi ankasa (kyerɛ sɛ ansa na shown.bs.modal
asɛm no asi).
myModal.show()
Afei nso, wobɛtumi de DOM element bi akɔma sɛ akasakasa a wobɛtumi agye wɔ modal nsɛm a ɛsisiiɛ no mu (sɛ relatedTarget
agyapadeɛ no).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
tɛ
Nsaano de sie modal bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde modal no asie ankasa (kyerɛ sɛ ansa na hidden.bs.modal
asɛm no asi).
myModal.hide()
handleUpdate yɛ adwuma
Fa nsa siesie modal no gyinabea sɛ modal bi sorokɔ sesa bere a wɔabue (kyerɛ sɛ sɛ ɛba sɛ scrollbar bi pue a).
myModal.handleUpdate()
tow gu
Ɔsɛe element bi modal. (Eyi data a wɔde asie wɔ DOM element no so)
myModal.dispose()
nyaNhwɛsode
Static kwan a ɛma wo kwan ma wo nya modal instance a ɛbata DOM element bi ho
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
nyaAnaasɛKyɛNhwɛso
Static kwan a ɛma wo kwan ma wo nya modal instance a ɛbata DOM element bi ho, anaasɛ wobɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Nsɛm a esisi
Bootstrap no modal adesuakuw no da nsɛm kakraa bi a esisii adi ma hooking kɔ modal dwumadi mu. Wɔtow modal nsɛm a esisi nyinaa wɔ modal no ankasa so (kyerɛ sɛ wɔ <div class="modal">
).
Adeyɛ no su | Nkyerɛmu |
---|---|
show.bs.modal |
Saa adeyɛ yi tow ntɛm ara bere a show wɔfrɛ instance kwan no. Sɛ kliki na ɛde ba a, element a wɔakliki no wɔ hɔ sɛ relatedTarget adeyɛ no agyapade. |
shown.bs.modal |
Wɔtow saa adeyɛ yi bere a wɔayɛ modal no ahu nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie). Sɛ kliki na ɛde ba a, element a wɔakliki no wɔ hɔ sɛ relatedTarget adeyɛ no agyapade. |
hide.bs.modal |
Wɔtow saa adeyɛ yi ntɛm ara bere a hide wɔafrɛ instance kwan no. |
hidden.bs.modal |
Wɔtow saa adeyɛ yi bere a wɔawie modal no a wɔde asie ama ɔdefo no (bɛtwɛn ma CSS nsakrae ahorow no awie). |
hidePrevented.bs.modal |
Wɔtow saa adeyɛ yi bere a wɔakyerɛ modal no, ne akyi mfonini no yɛ static na wɔde klike a ɛwɔ modal no akyi anaasɛ guankɔbea safoa a wɔde mia no yɛ a wɔde keyboard option no anaasɛ data-bs-keyboard wɔde ahyɛ false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})