Modal
Tirhisa Bootstrap’s JavaScript modal plugin ku engetela ti-dialog eka sayiti ya wena ku kuma mabokisi ya ku vonakala, switiviso swa vatirhisi, kumbe swilo leswi endleriweke wena hi ku helela.
Ndlela leyi swi tirhaka ha yona
Loko u nga si sungula hi xiphemu xa modal xa Bootstrap, tiyiseka leswaku u hlaya leswi landzelaka tanihi leswi swihlawulekisi swa hina swa menyu swi cinceke sweswinyana.
- Timodali ti akiwile hi HTML, CSS na JavaScript. Va vekiwile ehenhla ka swin’wana hinkwaswo eka tsalwa naswona va susa ku rhendzeleka eka
<body>
leswaku nhundzu ya modal yi rhendzeleka ematshan’weni ya sweswo. - Ku tsindziyela eka “backdrop” ya modal swi ta pfala modal hi ku tisungulela.
- Bootstrap yi seketela ntsena fasitere rin’we ra modal hi nkarhi. Ti modals leti nested a ti seketeriwi tanihileswi hi pfumelaka leswaku i mintokoto yo biha ya vatirhisi.
- Modals use
position: fixed
, leyi minkarhi yin’wana yi nga va yo hlawuleka nyana hi ku hundzuluxela ka yona. Loko swi koteka, veka HTML ya wena ya modal eka xiyimo xa le henhla ku papalata ku kavanyeteka loku nga vaka kona ku suka eka swiaki swin’wana. U ta hlangana na swiphiqo loko u nesting a.modal
endzeni ka element yin’wana leyi nga cinciki. - Nakambe, hikwalaho ka
position: fixed
, ku na switsundzuxo swo karhi hi ku tirhisa ti-modal eka switirhisiwa swa tiselfoni. Vona ti-doc ta hina ta nseketelo wa browser ku kuma vuxokoxoko. - Hikwalaho ka ndlela leyi HTML5 yi hlamuselaka semantiki ya yona ha yona, xihlawulekisi xa
autofocus
HTML a xi na vuyelo eka timodali ta Bootstrap. Leswaku u fikelela vuyelo lebyi fanaka, tirhisa JavaScript yin’wana leyi endleriweke wena:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
xivutiso xa midiya. Vona
xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .
Tshama u ri karhi u hlaya ku kuma ti-demo ni swiletelo swa matirhiselo.
Swikombiso
Swiphemu swa modal
Laha hansi ku na xikombiso xa static modal (leswi vulaka leswaku xa xona position
naswona display
swi hungutiwile). Ku katsiwile nhloko ya modal, miri wa modal (lowu lavekaka eka padding
), na nhloko ya modal (ya ku hlawula). Hi kombela leswaku u katsa tinhlokomhaka ta modal leti nga na swiendlo swo hlongola loko swi koteka, kumbe u nyika goza rin’wana ro hlongola leri nga erivaleni.
<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>
Demo leyi hanyaka
Cinca demo ya modal leyi tirhaka hi ku tikhoma buti leyi nga laha hansi. Yi ta rhetela ehansi yi tlhela yi nyamalala ku suka ehenhla ka tluka.
<!-- 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>
Xifaniso xa le ndzhaku lexi nga cinciki
Loko backdrop yi vekiwile eka static, modal a yi nge pfali loko u tsindziyela ehandle ka yona. Click button leyi nga laha hansi ku yi ringeta.
<!-- 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>
Ku rhendzeleka ka swilo swo leha
Loko ti modals ti leha ngopfu eka viewport kumbe xitirhisiwa xa mutirhisi, ti scroll ti tiyimele hi toxe eka tluka hi roxe. Ringeta demo leyi nga laha hansi ku vona leswaku hi vula yini.
U nga ha tlhela u endla modal leyi nga rhendzelekaka leyi pfumelelaka ku rhendzeleka miri wa modal hi ku engetela .modal-dialog-scrollable
eka .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Yi le xikarhi hi ndlela leyi yimisiweke
Engetela .modal-dialog-centered
eka .modal-dialog
ku vertically center ya 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>
Switsundzuxo swa switirhisiwa na ti-popovers
Ti Tooltips nati popovers tinga vekiwa endzeni ka ti modals tani hileswi swilaveka. Loko ti modals ti pfariwile, ti tootips tihi na tihi na ti popovers endzeni na tona ti hlongoriwa hi ku tisungulela.
<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>
Hi ku tirhisa giridi
Tirhisa sisiteme ya giridi ya Bootstrap endzeni ka modal hi ku endla swisaka .container-fluid
endzeni ka .modal-body
. Kutani, tirhisa titlilasi ta fambiselo ra gridi leti tolovelekeke hilaha u nga ta endla hakona kun’wana ni kun’wana.
<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>
Ku hambana ka swilo swa modal
Xana u na ntlhambi wa swikomba-nkarhi leswi hinkwaswo swi pfuxaka modal yin’we leyi nga ni swilo leswi hambaneke nyana? Tirhisa event.relatedTarget
na swihlawulekisi swa HTMLdata-bs-*
ku cinca-cinca leswi nga endzeni ka modal ku ya hi leswaku i buti yihi leyi tsindziyeleke.
Laha hansi ku na demo leyi hanyaka leyi landzeriwaka hi xikombiso xa HTML na JavaScript. Ku kuma vuxokoxoko byo tala, hlaya ti-doc ta swiendlakalo swa modal ku kuma vuxokoxoko eka 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
})
Ku cinca-cinca exikarhi ka ti-modal
Toggle exikarhi ka ti modals to tala hi ku vekiwa kun’wana ka vutlhari ka swihlawulekisi swa data-bs-target
na . data-bs-toggle
Xikombiso, u nga cinca-cinca modal ya ku tlheriseriwa ka phaswedi ku suka endzeni ka modal ya ku nghena leyi se yi pfulekeke. Hi kombela u xiya leswaku timodali to tala a ti nge pfuriwi hi nkarhi wun’we —ndlela leyi yi cinca-cinca ntsena exikarhi ka timodali timbirhi leti hambaneke.
<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>
Cinca swifaniso leswi hanyaka
Xihlawulekisi $modal-fade-transform
xi kumisisa xiyimo xa ku hundzuka xa .modal-dialog
emahlweni ka xifaniso xa modal fade-in, $modal-show-transform
xihlawulekisi xi kumisisa ku hundzuka ka .modal-dialog
emakumu ka xifaniso xa modal fade-in.
Loko u lava xikombiso xifaniso xa ku kurisa, u nga veka $modal-fade-transform: scale(.8)
.
Susa swifaniso leswi hanyaka
Eka ti-modal leti humelelaka ntsena ematshan’weni yo nyamalala leswaku ti ta languta, susa .fade
tlilasi eka mfungho wa wena wa modal.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Ku tlakuka loku cinca-cincaka
Loko ku tlakuka ka modal ku cinca loko yi pfulekile, u fanele ku bela riqingho myModal.handleUpdate()
leswaku u lulamisa xiyimo xa modal loko ko tshuka ku humelela scrollbar.
Ku fikelela
Tiyiseka leswaku u engetela aria-labelledby="..."
, u kombetela eka xihloko xa modal, eka .modal
. Ku engetela kwalaho, u nga ha nyika nhlamuselo ya mbulavurisano wa wena wa modal hi aria-describedby
on .modal
. Xiya leswaku a wu lavi ku engetela role="dialog"
tanihi leswi se hi swi engetelaka hi ku tirhisa JavaScript.
Ku nghenisa tivhidiyo ta YouTube
Ku nghenisa tivhidiyo ta YouTube eka ti-modal swi lava JavaScript leyi engetelekeke leyi nga riki eka Bootstrap leswaku yi yimisa ku tlanga hi ku tisungulela ni swin’wana. Vona post leyi ya Stack Overflow leyi pfunaka ku kuma vuxokoxoko byo tala.
Tisayizi leti nga hlawuriwa
Timodali ti na tisayizi tinharhu to hlawula, leti kumekaka hi ku tirhisa titlilasi ta mucinci leti nga ta vekiwa eka .modal-dialog
. Tisayizi leti ti nghena eka tindhawu to karhi to tshoveka leswaku ti papalata ti- scrollbar leti nga etlhelo eka swivono leswitsongo.
Sayizi | Tlilasi | Modal max-ku anama ka swilo |
---|---|---|
Xitsongo | .modal-sm |
300px |
Ku tlula | Hava | 500px |
Lexikulu | .modal-lg |
800px |
Swikulu leswi engetelekeke | .modal-xl |
1140px |
Modal ya hina ya default handle ka modifier class yi vumba modal ya sayizi ya “medium”.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal ya xikirini lexi heleleke
Ku tlula kun’wana i nhlawulo wo pop up modal leyi funengetaka viewport ya mutirhisi, leyi kumekaka hi ku tirhisa titlilasi ta vacinci leti vekiweke eka .modal-dialog
.
Tlilasi | Ku kumeka |
---|---|
.modal-fullscreen |
Nkarhi hinkwawo |
.modal-fullscreen-sm-down |
Ehansi576px |
.modal-fullscreen-md-down |
Ehansi768px |
.modal-fullscreen-lg-down |
Ehansi992px |
.modal-fullscreen-xl-down |
Ehansi1200px |
.modal-fullscreen-xxl-down |
Ehansi1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Swilo leswi cinca-cincaka
$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);
Xintambyana
Ti modals ta fullscreen leti hlamulaka ti endliwa hi ku tirhisa $breakpoints
mepe na loop eka 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);
}
}
}
}
Matirhiselo
Plugin ya modal yi cinca-cinca swilo swa wena leswi fihliweke loko swi laviwa, hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Yi tlhela yi tlula mahanyelo ya ku rhendzeleka ka xiviri naswona yi humesa a .modal-backdrop
ku nyika ndhawu yo tsindziyela yo hlongola timodali leti kombisiweke loko u tsindziyela ehandle ka modali.
Hi ku tirhisa swihlawulekisi swa data
Ku cinca-cinca
Endla leswaku modal yi tirha handle ko tsala JavaScript. Seta data-bs-toggle="modal"
eka elemente ya controller, ku fana na button, xikan’we na a data-bs-target="#foo"
kumbe href="#foo"
ku kongomisa modal yo karhi ku toggle.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Bakanya
Ku hlongoriwa ku nga fikeleriwa hi data
xihlawulekisi eka buti endzeni ka modal tanihilaha swi kombisiweke hakona laha hansi:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
kumbe eka buti ehandle ka modal hi ku tirhisa data-bs-target
tanihilaha swi kombisiweke hakona laha hansi:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Hi ku tirhisa JavaScript
Endla modal hi layini yin’we ya JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Swihlawulekisi
Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-
, tanihi le ka data-bs-backdrop=""
.
Vito | Muxaka | Ku tlula | Nhlamuselo |
---|---|---|---|
backdrop |
boolean kumbe ntambhu'static' |
true |
Ku katsa na xiaki xa modal-backdrop. Handle ka sweswo, boxa static eka backdrop leyi nga pfaliki modal eka click. |
keyboard |
xitsonga xitsonga | true |
Ku pfala modal loko ku tshikileriwa escape key |
focus |
xitsonga xitsonga | true |
Yi veka ku kongomisa eka modal loko yi sunguriwa. |
Maendlelo
Maendlelo ya asynchronous na ku cinca
Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .
Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .
Swihlawulekisi swo hundza
Ku endla leswaku nhundzu ya wena yi tirha tanihi modal. Ku amukela swihlawulekisi swa ku hlawula object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
ku cinca-cinca
Hi voko u cinca-cinca modal. Ku tlhelela eka mufoyini loko modal yi nga si kombisiwa kumbe ku tumbetiwa hakunene (i.e. emahlweni ka ku humelela shown.bs.modal
kumbe hidden.bs.modal
xiendlakalo).
myModal.toggle()
kombisa
Hi voko u pfula modal. Ku tlhelela eka mufoyini loko modal yi nga si kombisiwa hakunene (i.e. shown.bs.modal
xiendlakalo xi nga si humelela).
myModal.show()
Nakambe, u nga hundzisela elemente ya DOM tanihi argument leyi nga amukeriwaka eka swiendlakalo swa modal (tanihi relatedTarget
nhundzu).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
tumbela
Hi voko u tumbeta modal. Ku tlhelela eka mufoyini loko modal yi nga si fihliwa hakunene (i.e. hidden.bs.modal
xiendlakalo xi nga si humelela).
myModal.hide()
handleUpdate
Lulamisa hi voko xiyimo xa modal loko ku tlakuka ka modal ku cinca loko yi pfulekile (i.e. loko ku humelela scrollbar).
myModal.handleUpdate()
lahla
Ku herisa modal ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
myModal.dispose()
getXikombiso
Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa modal lexi fambelanaka na elemente ya DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
kumaKumbeEndlaXikombiso
Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa modal lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Swiendlakalo
Tlilasi ya modal ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa modal. Swiendlakalo hinkwaswo swa modal swi duvuriwa eka modal hi yoxe (i.e. eka <div class="modal">
).
Muxaka wa xiendlakalo | Nhlamuselo |
---|---|
show.bs.modal |
Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku show vitaniwa ndlela ya xikombiso. Loko swi vangiwa hi ku tsindziyela, xiaki lexi tsindziyeleke xi kumeka tanihi relatedTarget nhundzu ya xiendlakalo. |
shown.bs.modal |
Xiendlakalo lexi xi duvuriwa loko modal yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka CSS ku hela). Loko swi vangiwa hi ku tsindziyela, xiaki lexi tsindziyeleke xi kumeka tanihi relatedTarget nhundzu ya xiendlakalo. |
hide.bs.modal |
Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya hide xikombiso yi vitaniwile. |
hidden.bs.modal |
Xiendlakalo lexi xi duvuriwa loko modal yi hetile ku tumbetiwa eka mutirhisi (yi ta rindza ku cinca ka CSS ku hela). |
hidePrevented.bs.modal |
Xiendlakalo lexi xi duvuriwa loko modal yi kombisiwa, backdrop ya yona i static naswona ku tsindziyela ehandle ka modal kumbe ku tshikileriwa ka xilotlelo xo baleka ku endliwa hi nhlawulo wa khibhodi kumbe data-bs-keyboard ku vekiwa eka false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})