SourceMoodaalii
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:
$ ( '#myModal' ). on ( 'shown.bs.modal' , function () {
$ ( '#myInput' ). trigger ( 'focus' )
})
Demoo fi qajeelfama itti fayyadamaaf dubbisuu itti fufi.
Fakkeenyaaf
Qaamolee moodaalii
Armaan gaditti fakkeenya moodaalii istaatiksii position
(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.
Barreeffamni qaama moodaalii as deema.
<div class= "modal" tabindex= "-1" role= "dialog" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</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-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.
Woohoo, barreeffama kana moodaalaan dubbisaa jirta!
Moodaala demoo eegaluu
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</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.
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii.
Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Donec sed odio dui. Donec ullamcorper nulla kan hin meetus auctor fringilla.
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii.
Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Donec sed odio dui. Donec ullamcorper nulla kan hin meetus auctor fringilla.
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii.
Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Donec sed odio dui. Donec ullamcorper nulla kan hin meetus auctor fringilla.
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii.
Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Donec sed odio dui. Donec ullamcorper nulla kan hin meetus auctor fringilla.
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii.
Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Donec sed odio dui. Donec ullamcorper nulla kan hin meetus auctor fringilla.
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor caalbaasii.
Aenean lacinia bibendum kan jedhu kan hin qabne ta’uu isaati. Praesent commodo cursus magna, vel scelerisque nisl consectetur fi kan jedhaman kanneen akka. Donec sed odio dui. Donec ullamcorper nulla kan hin meetus auctor fringilla.
Moodaala demoo eegaluu
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalLong" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalLong" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLongTitle" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLongTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Giddugaleessa dhaabbataa ta’e
Moodaalii vertikaaliin giddugaleessa gochuuf .modal-dialog-centered
gara itti dabali ..modal-dialog
Cras mattis consectetur purus taa'uu amet fermentum jedhamuun beekama. Cras justo odio, dapibus ac facilisis keessatti, egestas eget quam jedhamuun beekama. Morbi leo risus, porta ac consectetur ac, vestibulum eros irratti argamu.
Moodaala demoo eegaluu
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalCenter" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalCenter" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalCenterTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-centered" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalCenterTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
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.
Popover modal keessatti
Qabduun kun cuqaasuu irratti popover kakaasa.
Gorsa meeshaalee moodaalii keessatti
Link kun fi link sun tooltips on hover qabu.
Moodaala demoo eegaluu
<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-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.
.kol-md-4 jedhamuun beekama
.col-md-4 .ml-ofumaan
.col-md-3 .ml-ofumaan
.col-md-2 .ml-ofumaan
Sadarkaa 1ffaa: .col-sm-9
Sadarkaa 2ffaa: .col-8 .col-sm-6
Sadarkaa 2ffaa: .col-4 .col-sm-6
Moodaala demoo eegaluu
<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 ml-auto" > .col-md-4 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-md-3 ml-auto" > .col-md-3 .ml-auto</div>
<div class= "col-md-2 ml-auto" > .col-md-2 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-md-6 ml-auto" > .col-md-6 .ml-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-*
( karaa jQuery ta'uu danda'a ) 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 dubbisi relatedTarget
.
@mdo'f moodaala banaa
@fat'f moodaala banaa
@getbootstrap'f moodaalii banaa
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@mdo" > Open modal for @mdo</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@fat" > Open modal for @fat</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@getbootstrap" > Open modal for @getbootstrap</button>
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > New message</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
<form>
<div class= "form-group" >
<label for= "recipient-name" class= "col-form-label" > Recipient:</label>
<input type= "text" class= "form-control" id= "recipient-name" >
</div>
<div class= "form-group" >
<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-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Send message</button>
</div>
</div>
</div>
</div>
$ ( '#exampleModal' ). on ( 'show.bs.modal' , function ( event ) {
var button = $ ( event . relatedTarget ) // Button that triggered the modal
var recipient = button . data ( 'whatever' ) // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $ ( this )
modal . find ( '.modal-title' ). text ( 'New message to ' + recipient )
modal . find ( '.modal-body input' ). val ( recipient )
})
Animeeshinii balleessi
Moodaalota salphaatti mul'ataniif ilaaluuf fade in osoo hin taane, .fade
gita mallattoo moodaalii kee irraa haqi.
<div class= "modal" tabindex= "-1" role= "dialog" aria-labelledby= "..." aria-hidden= "true" >
...
</div>
Olka’iinsa daayinamikii
Yoo olka'iinsi moodaalichaa osoo banaa ta'ee jijjiirame, yoo $('#myModal').modal('handleUpdate')
barruun tarree mul'ate bakka moodaalichaa irra deebi'ii sirreessuuf waamuu qabda.
Dhaqqabummaa
role="dialog"
fi aria-labelledby="..."
, mata duree moodaalii wabeeffachuun, gara .modal
, fi role="document"
ofii isaatii dabaluu kee mirkaneessi .modal-dialog
. Dabalataan, ibsa qaaqa moodaalii kee aria-describedby
irratti on waliin kennuu dandeessa .modal
.
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 lama 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.
Moodaala guddaa
Moodaalii xiqqaa
<!-- Large modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-lg" > Large modal</button>
<div class= "modal fade bd-example-modal-lg" tabindex= "-1" role= "dialog" aria-labelledby= "myLargeModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-lg" >
<div class= "modal-content" >
...
</div>
</div>
</div>
<!-- Small modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-sm" > Small modal</button>
<div class= "modal fade bd-example-modal-sm" tabindex= "-1" role= "dialog" aria-labelledby= "mySmallModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-sm" >
<div class= "modal-content" >
...
</div>
</div>
</div>
Fayyadama
Ijaarsi moodaalii qabiyyee dhokataa kee gaaffii irratti, karaa amaloota deetaa ykn JaavaScript jijjiira. Akkasumas amala garagalchuu durtii irra darbuu .modal-open
irratti dabalee yeroo moodaaliin ala cuqaastu moodaalota agarsiifaman kuffisuuf naannoo cuqaasuu kennuudhaaf a uuma.<body>
.modal-backdrop
Karaa amaloota deetaa
JaavaScript osoo hin barreessiin moodaalii tokko hojii irra oolchi. Qaama too'ataa irratti saagi data-toggle="modal"
, akka qaree, waliin data-target="#foo"
ykn href="#foo"
moodaalii murtaa'e jijjiiruuf irratti xiyyeeffachuuf.
<button type= "button" data-toggle= "modal" data-target= "#myModal" > Launch modal</button>
Karaa JaavaScript
Moodaalii id myModal
qabu sarara JaavaScript tokkoon waami:
$ ( '#myModal' ). modal ( options )
Filannoowwan
Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-
, akkuma keessatti dabali data-backdrop=""
.
Maqaa
Akaakuu
Durtii dha
Ibsa
duubbee
boolean ykn tarree'static'
dhugaa
Qaama moodaalii-duubbee of keessaa qaba. static
Akka filannootti, duubbee kan moodaalii cuqaasuu irratti hin cufneef ifteessi .
kiiboordii
boolee
dhugaa
Yeroo furtuun miliquu dhiibamu moodaalii cufa
xiyyeeffannoo kennuu
boolee
dhugaa
Yeroo jalqabamu xiyyeeffannoo moodaalii irratti kaa'a.
agarsiisuu
boolee
dhugaa
Moodaalii yeroo jalqabamu agarsiisa.
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 .
Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali.
.modal(options)
Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object
.
$ ( '#myModal' ). modal ({
keyboard : false
})
.modal('toggle')
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' ). modal ( 'toggle' )
.modal('show')
Harkaan moodaalii tokko bana. Moodaaliin qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.modal
taatee osoo hin uumamin dura) gara waamichaatti deebi'a.
$ ( '#myModal' ). modal ( 'show' )
.modal('hide')
Harkaan moodaalii tokko dhoksa. Moodaaliin qabatamaan osoo hin dhokatin dura (jechuunis osoo hidden.bs.modal
taatee hin uumamin dura) gara waamichaatti deebi'a.
$ ( '#myModal' ). modal ( 'hide' )
.modal('handleUpdate')
Yoo olka'iinsi moodaalichaa yeroo banaa ta'e jijjiirame (jechuunis yoo barruun tarree mul'ate) bakka moodaalichaa harkaan irra deebi'ii sirreessii.
$ ( '#myModal' ). modal ( 'handleUpdate' )
.modal('dispose')
Moodaalii elementii tokkoo ni balleessa.
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
agarsiisa.bs.moodaalii
Taatee kun yeroo show
mala fakkeenyaa waamamu battalumatti dhukaasa. Yoo cuqaasaatiin uumame, qaamni cuqaafame akka relatedTarget
qabeentaa taateetti argama.
agarsiifame.bs.moodaalii
Taatee kun yeroo moodaaliin fayyadamaaf akka mul'atu godhame ni dhukaafama (ce'umsa CSS xumuruuf ni eega). Yoo cuqaasaatiin uumame, qaamni cuqaafame akka relatedTarget
qabeentaa taateetti argama.
dhoksaa.bs.moodaalii
Taatee kun yeroo hide
mala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.moodaalii
Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokatee xumuredha (ce'umsa CSS xumuramuu eega).
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})