Moodaalii
Sanduuqawwan ifaa, beeksisa fayyadamaa, ykn qabiyyee guutummaatti amalaaf qaaqa gara marsariitii keetti dabaluudhaaf, Bootstrap's JavaScript modal plugin fayyadami.
Akkaataa itti hojjetu
Qaama moodaalii Bootstrap jalqabuu kee dura, filannoowwan menu keenyaa dhiheenya kana waan jijjiiramaniif kanneen armaan gadii dubbisuu kee mirkaneessi.
- Moodaalonni HTML, CSS, fi JaavaScript waliin ijaaramaniiru. Isaan galmee keessatti waan biraa hunda irratti kan dhaabbatanii fi
<body>
qabiyyeen moodaalii bakka isaa akka garagalfamuuf tarree irraa balleessu. - Modal “backdrop” irratti cuqaasuun ofumaan modal cufa.
- Bootstrap yeroo tokkotti foddaa moodaalii tokko qofa deeggara. Nested modals muuxannoo fayyadamaa gadhee ta'uu isaanii waan amannuuf hin deeggaraman.
- Modals use
position: fixed
, kunis yeroo tokko tokko waa'ee agarsiisa isaa xiqqoo adda ta'uu danda'a. Yeroo danda'ametti, HTML moodaalii kee bakka sadarkaa olaanaa irra kaa'i, kunis qaamolee biroo irraa jeequmsi akka hin uumamneef..modal
Yeroo a elementii dhaabbataa biraa keessaa nesting gootu dhimmoota keessa galuun kee hin oolu . - Ammas, sababa ,
position: fixed
meeshaalee moobaayilaa irratti moodaalota fayyadamuu wajjin of eeggannoowwan tokko tokko jiru. Bal'ina isaaf docs deeggarsa browser keenya ilaalaa . - Sababa akkaataa HTML5 hiika isaa ibsutti, amalli
autofocus
HTML moodaalota Bootstrap keessatti bu'aa hin qabu. Bu'aa walfakkaatu galmaan ga'uuf, JaavaScript amala tokko tokko fayyadami:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
gaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali
.
Demoo fi qajeelfama itti fayyadamaaf dubbisuu itti fufi.
Fakkeenyaaf
Qaamolee moodaalii
Armaan gaditti fakkeenya moodaalii istaatiksiiposition
(hiikni isaas isaa fi display
irra darbamaniiru jechuudha). Kan hammataman mataduree moodaalii, qaama moodaalii (f barbaachisu padding
), fi jalaan moodaalii (dirqama). Yeroo danda'ametti mata dureewwan moodaalii tarkaanfiiwwan hojii irraa ari'uu waliin akka hammattan, ykn tarkaanfii hojii irraa ari'uu ifa ta'e kan biraa akka kennitan isin gaafanna.
<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>
Deemoo kallattiin
Qabduu armaan gadii cuqaasuun demoo moodaalii hojjetu jijjiiri. Innis gadi siqee gubbaa fuula irraa ni fade in ta'a.
<!-- 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>
Duubbee istaatiksii
Yeroo duubbee gara static qindaa'u, moodaaliin yeroo ala cuqaastu hin cufamu. Yaaluuf button armaan gadii cuqaasaa.
<!-- 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>
Qabiyyee dheeraa garagalchuu
Yeroo moodaloonni buufata ilaalchaa fayyadamaa ykn meeshaadhaaf baay'ee dheeraa ta'an, fuula mataa isaa irraa walaba ta'anii garagalchu. Maal jechuu keenya ilaaluuf demo armaan gadii yaalaa.
Akkasumas moodaalii garagalfamuu danda'u kan qaama moodaalii .modal-dialog-scrollable
gara tti dabaluudhaan garagalchuu hayyamu uumuu dandeessa .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Giddugaleessa dhaabbataa ta’e
Moodaalii vertikaaliin giddugaleessa gochuuf .modal-dialog-centered
gara itti dabali ..modal-dialog
<!-- 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>
Gorsa meeshaalee fi popovers
Tooltips fi popovers akka barbaachisummaa isaatti modals keessa kaa'uun ni danda'ama. Yeroo moodaalonni cufaman, tooltipps fi popovers kamiyyuu keessa jirus ofumaan ni kufa.
<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>
Giriidii fayyadamuudhaan
Sirna tarjaa Bootstrap moodaalii .container-fluid
keessaa keessaa nesting gochuun fayyadami .modal-body
. Sana booda, akkuma bakka biraatti gootutti gita sirna giiridii idilee fayyadami.
<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>
Qabiyyee moodaalii garaa garaa
Tuuta buttooni hundi isaanii qabiyyee xiqqoo adda ta'een moodaalii walfakkaataa kakaasan qabduu? Fayyadamaa event.relatedTarget
fi amaloota HTMLdata-bs-*
qabiyyee moodaalichaa qaree kamtu cuqaafame irratti hundaa'uun garaagarummaa uumuuf.
Armaan gaditti live demo kan fakkeenya HTML fi JavaScript itti aanee jira. Odeeffannoo dabalataaf, bal'inaaf galmeewwan taateewwan moodaalii dubbisirelatedTarget
.
<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
})
Moodaalota gidduutti jijjiiri
Moodaalota hedduu gidduutti bakka qaroo tokko tokkoon amaloota data-bs-target
fi waliin jijjiiri. data-bs-toggle
Fakkeenyaaf, moodaalii jecha icciitii deebisanii dhaabuu mallattoo duraan banaa ta'e keessaa moodaalii keessatti jijjiiruu dandeessa. Maaloo hubadhu moodaalonni hedduun yeroo tokkotti banamuu hin danda'an —malli kun salphaatti moodaalonni adda addaa lama gidduutti jijjiira.
<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>
Sochii qaamaa jijjiiri
Jijjiiramaan $modal-fade-transform
haalata jijjiiramaa kan .modal-dialog
sochii moodaalii fade-in dura $modal-show-transform
murteessa, jijjiiramaan jijjiirraa of .modal-dialog
dhuma sochii moodaalii fade-in murteessa.
Yoo fakkeenyaaf sochii guddisuu barbaadde, saaguu dandeessa $modal-fade-transform: scale(.8)
.
Animeeshinii balleessi
Moodaalota salphaatti mul'ataniif ilaaluuf fade in osoo hin taane, .fade
gita mallattoo moodaalii kee irraa haqi.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Olka’iinsa daayinamikii
Yoo olka'iinsi moodaalichaa osoo banaa ta'ee jijjiirame, yoo myModal.handleUpdate()
barruun tarree mul'ate bakka moodaalichaa irra deebi'ii sirreessuuf waamuu qabda.
Dhaqqabummaa
Mata duree moodaalii aria-labelledby="..."
wabeeffachuun, gara .modal
. Dabalataan, ibsa qaaqa moodaalii kee aria-describedby
irratti on waliin kennuu dandeessa .modal
. role="dialog"
Hubadhaa duraanuu karaa JavaScript waan itti daballeef dabaluun isin hin barbaachisu .
Viidiyoo YouTube keessa galchuu
Viidiyoowwan YouTube modal keessatti galchuun ofumaan tapha dhaabuuf Bootstrap keessa hin taane JavaScript dabalataa barbaada fi kanneen biroo. Odeeffannoo dabalataaf barreeffama Stack Overflow gargaaraa kana ilaali .
Safara filannoo
Moodaalonni hammangaa filannoo sadii qabu, karaa gita fooyyessaa a irratti kaa'amuu danda'u .modal-dialog
. Hangaawwan kunniin bakka cabbii murtaa'e irratti kick in ta'u, kunis barruulee qajeeltoowwan mul'annoo dhiphoo irratti akka hin uumamneef.
Hamma ga'u | Kutaa | Moodaalii max-bal'ina |
---|---|---|
Xiqqoo | .modal-sm |
300px |
Durtii dha | Homaa | 500px |
Bal'aa | .modal-lg |
800px |
Dabalataan guddaa | .modal-xl |
1140px |
Moodaalli keenya durtii gita fooyyessaa malee moodaala guddina “giddu galeessaa” uuma.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Moodaala Iskiriinii Guutuu
Irra darbuun biraa filannoo moodaalii kan buufata ilaalcha fayyadamaa uwwisu, karaa gita fooyyessaa kanneen a irratti kaa'aman argamuudha .modal-dialog
.
Kutaa | Argamuu isaa |
---|---|
.modal-fullscreen |
Yeroo hunda |
.modal-fullscreen-sm-down |
Gadi576px |
.modal-fullscreen-md-down |
Gadi768px |
.modal-fullscreen-lg-down |
Gadi992px |
.modal-fullscreen-xl-down |
Gadi1200px |
.modal-fullscreen-xxl-down |
Gadi1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass jedhama
Jijjiiramoota
$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);
Furgaasuu
Moodaalonni iskiriinii guutuu deebii kennan karaa $breakpoints
kaartaa fi loop in 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);
}
}
}
}
Fayyadama
Ijaarsi moodaalii qabiyyee dhokataa kee gaaffii irratti, karaa amaloota deetaa ykn JaavaScript jijjiira. Akkasumas amala tarree durtii irra darba fi .modal-backdrop
yeroo moodaala ala cuqaastu moodaalota agarsiifaman kuffisuuf naannoo cuqaasuu kennuudhaaf a uuma.
Karaa amaloota deetaa
Toggle gochuu
JaavaScript osoo hin barreessiin moodaalii tokko hojii irra oolchi. Qaama too'ataa irratti saagi data-bs-toggle="modal"
, akka qaree, waliin data-bs-target="#foo"
ykn href="#foo"
moodaalii murtaa'e jijjiiruuf irratti xiyyeeffachuuf.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Balleessuu
Hojii irraa ari'uun akka armaan gadiitti data
amaloota qaree moodaalii keessaa irratti argamuun galma ga'uu danda'a :
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
ykn button moodaaliin ala jirudata-bs-target
irratti akka armaan gadiitti fayyadamuun :
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Karaa JaavaScript
Sarara JaavaScript tokkoon moodaalii uumi:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-
, akkuma keessatti dabali data-bs-backdrop=""
.
Maqaa | Akaakuu | Durtii dha | Ibsa |
---|---|---|---|
backdrop |
boolean ykn tarree'static' |
true |
Qaama moodaalii-duubbee of keessaa qaba. static Akka filannootti, duubbee kan moodaalii cuqaasuu irratti hin cufneef ifteessi . |
keyboard |
boolee | true |
Yeroo furtuun miliquu dhiibamu moodaalii cufa |
focus |
boolee | true |
Yeroo jalqabamu xiyyeeffannoo moodaalii irratti kaa'a. |
Malawwan
Malawwanii fi ce’umsawwan wal hin simne
Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .
Filannoowwan darbuu
Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle jechuudha
Harkaan moodaalii tokko jijjiira. Moodaaliin qabatamaan osoo hin agarsiifamin ykn hin dhokatiin dura (jechuunis osoo taatee shown.bs.modal
ykn hin uumamin dura) gara waamichaatti deebi'a.hidden.bs.modal
myModal.toggle()
agarsiisuu
Harkaan moodaalii tokko bana. Moodaaliin qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.modal
taatee osoo hin uumamin dura) gara waamichaatti deebi'a.
myModal.show()
Akkasumas, qaama DOM akka falmii taateewwan moodaalii keessatti fudhatamuu danda'utti dabarsuu dandeessa (akka relatedTarget
qabeentaa).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
dhoksuu
Harkaan moodaalii tokko dhoksa. Moodaaliin qabatamaan osoo hin dhokatin dura (jechuunis osoo hidden.bs.modal
taatee hin uumamin dura) gara waamichaatti deebi'a.
myModal.hide()
handleUpdate gochuu
Yoo olka'iinsi moodaalichaa yeroo banaa ta'e jijjiirame (jechuunis yoo barruun tarree mul'ate) bakka moodaalichaa harkaan irra deebi'ii sirreessii.
myModal.handleUpdate()
gatuu
Moodaalii elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
myModal.dispose()
Fakkeenya argadhu
Mala istaatiksii kan fakkeenya moodaalii elementii DOM waliin walqabate argachuuf si dandeessisu
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
Fakkeenya argadhuYknUumi
Mala istaatiksii kan fakkeenya moodaalii elementii DOM waliin walqabate argachuuf si dandeessisu, ykn yoo hin jalqabne haaraa uumuuf si dandeessisu
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Taateewwan
Gitni moodaalii Bootstrap taateewwan muraasa gara dalagaa moodaaliitti hooking gochuuf saaxila. Taateewwan moodaalii hundi moodaalii mataa isaa irratti (jechuunis <div class="modal">
) irratti dhukaafamu.
Gosa taatee | Ibsa |
---|---|
show.bs.modal |
Taatee kun yeroo show mala fakkeenyaa waamamu battalumatti dhukaasa. Yoo cuqaasuun uumame, qaamni cuqaafame akka relatedTarget qabeentaa taateetti argama. |
shown.bs.modal |
Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaaf akka mul'atu godhame (ce'umsa CSS xumuramuu eega). Yoo cuqaasuun uumame, qaamni cuqaafame akka relatedTarget qabeentaa taateetti argama. |
hide.bs.modal |
Taatee kun yeroo hide mala fakkeenyaa waamame battalumatti dhukaafama. |
hidden.bs.modal |
Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokatee xumuredha (ce'umsa CSS xumuramuu eega). |
hidePrevented.bs.modal |
Taatee kun kan dhukaafamu yeroo moodaaliin agarsiifamu, duubni isaa static fi cuqaasuun moodaaliin ala jiru ykn dhiibbaa furtuu miliquu filannoo gabatee furtuu wajjin raawwatama ykn data-bs-keyboard gara false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})