Modal
Cleachd plugan modal JavaScript Bootstrap gus còmhraidhean a chuir ris an làrach agad airson bogsaichean aotrom, fiosan cleachdaiche, no susbaint gu tur àbhaisteach.
Mar a tha e ag obair
Mus tòisich thu le modal modal Bootstrap, bi cinnteach gun leugh thu na leanas oir tha na roghainnean clàr againn air atharrachadh o chionn ghoirid.
- Tha modalan air an togail le HTML, CSS, agus JavaScript. Tha iad suidhichte thairis air a h-uile càil eile san sgrìobhainn agus thoir air falbh an scrolla bhon chlàr
<body>
gus am bi susbaint modal a’ gluasad nan àite. - Ma bhriogas tu air a’ mhodal “cùl-raon” dùinidh sin am modal gu fèin-obrachail.
- Chan eil Bootstrap a’ toirt taic ach do aon uinneag modal aig an aon àm. Chan eil modalan neadachaidh a’ faighinn taic oir tha sinn den bheachd gur e droch eòlas luchd-cleachdaidh a th’ annta.
- Bidh modalan a’ cleachdadh
position: fixed
, a dh’ fhaodas uaireannan a bhith beagan sònraichte mu dheidhinn a thoirt seachad. Far a bheil e comasach, cuir do HTML modal ann an suidheachadh àrd-ìre gus casg a chuir air eileamaidean eile a sheachnadh. Is dòcha gum bi duilgheadasan agad nuair a bhios tu a’ neadachadh taobh a-.modal
staigh eileamaid stèidhichte eile. - A-rithist, air sgàth
position: fixed
, tha cuid de uaimhean ann a thaobh a bhith a’ cleachdadh mhodalan air innealan gluasadach. Faic na docaichean taic brabhsair againn airson mion-fhiosrachadh. - Air sgàth mar a tha HTML5 a’ mìneachadh a semantics, chan eil buaidh sam bith aig feart HTML ann am
autofocus
modalan Bootstrap. Gus an aon bhuaidh a choileanadh, cleachd cuid de JavaScript àbhaisteach:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
ceist nam meadhanan. Faic an
earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .
Cùm a’ leughadh airson demos agus stiùireadh cleachdaidh.
Eisimpleirean
Co-phàirtean modal
Gu h-ìosal tha eisimpleir modal statachposition
(a’ ciallachadh gu bheil e agus display
gun deach a thoirt thairis). Nam measg tha bann-cinn modal, buidheann modal (riatanach airson padding
), agus bonn-coise modal (roghainneil). Bidh sinn ag iarraidh gun cuir thu a-steach cinn-cinn modal le gnìomhan cuir às nuair as urrainnear, no gun toir thu seachad gnìomh diùltadh soilleir eile.
<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 beò
Tog demo modal obrach le bhith a’ briogadh air a’ phutan gu h-ìosal. Bidh e a 'sleamhnachadh sìos agus a' seargadh a-steach bho mhullach na duilleige.
<!-- 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>
Cùl-raon statach
Nuair a bhios an cùl-raon air a shuidheachadh gu statach, cha dùin am modal nuair a bhriogas tu air taobh a-muigh. Cliog air a’ phutan gu h-ìosal gus feuchainn air.
<!-- 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>
Sgrolaich susbaint fada
Nuair a dh'fhàsas modalan ro fhada airson sealladh no inneal an neach-cleachdaidh, gluaisidh iad gu neo-eisimeileach bhon duilleag fhèin. Feuch an demo gu h-ìosal gus faicinn dè tha sinn a’ ciallachadh.
Faodaidh tu cuideachd modal scrollable a chruthachadh a leigeas leat a’ bhuidheann modal a sgrùdadh le bhith a’ cur .modal-dialog-scrollable
ri .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Meadhanach gu dìreach
Cuir .modal-dialog-centered
ris .modal-dialog
a 'mhodal gu dìreach sa mheadhan.
<!-- 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>
Molaidhean innealan agus popovers
Faodar molaidhean innealan agus popovers a chuir ann am modalan mar a dh’ fheumar. Nuair a bhios modalan dùinte, thèid molaidhean innealan agus popovers sam bith a-staigh a chuir às gu fèin-ghluasadach cuideachd.
<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>
A 'cleachdadh a' chliath
Cleachd siostam clèithe Bootstrap taobh a-staigh modal le bhith a’ neadachadh .container-fluid
taobh a-staigh an fhaidhle .modal-body
. An uairsin, cleachd na clasaichean siostam clèithe àbhaisteach mar a dhèanadh tu an àite sam bith eile.
<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>
Ag atharrachadh susbaint modal
A bheil dòrlach de phutanan agad a bhrosnaicheas an aon mhodal le susbaint beagan eadar-dhealaichte? Cleachd event.relatedTarget
agus buadhan HTMLdata-bs-*
gus susbaint a’ mhodail atharrachadh a rèir dè am putan a chaidh a bhriogadh.
Gu h-ìosal tha demo beò air a leantainn le eisimpleir HTML agus JavaScript. Airson tuilleadh fiosrachaidh, leugh na docaichean tachartasan modal airson mion-fhiosrachadh air 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
})
Tog eadar modalan
Tog eadar ioma-mhodalan le beagan suidheachadh ciallach de na data-bs-target
agus data-bs-toggle
buadhan. Mar eisimpleir, dh'fhaodadh tu modal ath-shuidheachadh facal-faire a thogail bhon taobh a-staigh de shoidhne a tha fosgailte mar-thà ann am modal. Thoir an aire nach urrainn iomadh modal a bhith fosgailte aig an aon àm - tha an dòigh seo dìreach a’ togail eadar dà mhodal fa leth.
<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>
Atharraich beothachadh
Bidh an $modal-fade-transform
caochladair a’ dearbhadh staid cruth-atharrachaidh .modal-dialog
ron bheothachadh modal fade-in, bidh an $modal-show-transform
caochladair a’ dearbhadh an cruth-atharrachadh .modal-dialog
aig deireadh a’ bheòthachaidh modal fade-in.
Ma tha thu ag iarraidh mar eisimpleir beòthalachd zoom-in, faodaidh tu $modal-fade-transform: scale(.8)
.
Thoir air falbh beothachadh
Airson modalan a tha dìreach a’ nochdadh seach a bhith a’ seargadh a-steach ri fhaicinn, thoir air falbh an .fade
clas bhon chomharra modal agad.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Àrdan fiùghantach
Ma dh’ atharraicheas àirde modal fhad ‘s a tha e fosgailte, bu chòir dhut fònadh myModal.handleUpdate()
gus suidheachadh a’ mhodail a leughadh air eagal ’s gun nochd bàr-scrollaidh.
Ruigsinneachd
Dèan cinnteach gun cuir thu aria-labelledby="..."
, a’ toirt iomradh air an tiotal modal, gu .modal
. A bharrachd air an sin, faodaidh tu cunntas a thoirt air a’ chòmhradh modal agad le aria-describedby
on .modal
. Thoir an aire nach fheum thu cur ris role="dialog"
oir tha sinn ga chur ris tro JavaScript mu thràth.
Cuir a-steach bhideothan YouTube
Le bhith a’ stèidheachadh bhideothan YouTube ann am modalan feumaidh JavaScript a bharrachd nach eil ann am Bootstrap gus stad a chuir air ath-chluich gu fèin-ghluasadach agus barrachd. Faic am post cuideachail Stack Overflow seo airson tuilleadh fiosrachaidh.
Meudan roghainneil
Tha trì meudan roghainneil aig modalan, rim faighinn tro chlasaichean mion-atharrachaidh airson an cur air faidhle .modal-dialog
. Bidh na meudan sin a’ tòiseachadh aig puingean brisidh sònraichte gus barraichean-scrollaidh còmhnard a sheachnadh air puirt-seallaidh nas cumhainge.
Meud | Clas | Modal leud as motha |
---|---|---|
Beag | .modal-sm |
300px |
Deònach | Chan eil gin | 500px |
Mòr | .modal-lg |
800px |
Mòr a bharrachd | .modal-xl |
1140px |
Tha am modal bunaiteach againn gun chlas mion-atharrachaidh a’ dèanamh suas modal meud “meadhanach”.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal làn-sgrìn
Is e ath-chuinge eile an roghainn modal a tha a’ còmhdach sealladh an neach-cleachdaidh a nochdadh, a tha ri fhaighinn tro chlasaichean mion-atharrachaidh a tha air an cur air faidhle .modal-dialog
.
Clas | Ri fhaotainn |
---|---|
.modal-fullscreen |
An-còmhnaidh |
.modal-fullscreen-sm-down |
Gu h-ìosal576px |
.modal-fullscreen-md-down |
Gu h-ìosal768px |
.modal-fullscreen-lg-down |
Gu h-ìosal992px |
.modal-fullscreen-xl-down |
Gu h-ìosal1200px |
.modal-fullscreen-xxl-down |
Gu h-ìosal1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Caochlaidhean
$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);
Lùb
Bithear a’ cruthachadh modalan làn-sgrìn freagairteach tron $breakpoints
mhapa agus lùb ann am faidhle 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);
}
}
}
}
Cleachdadh
Bidh am plugan modal a’ togail do shusbaint falaichte a rèir iarrtas, tro bhuadhan dàta no JavaScript. Bidh e cuideachd a’ dol thairis air giùlan scrollaidh àbhaisteach agus a’ gineadh a .modal-backdrop
gus àite cliog a sholarachadh airson a bhith a’ cur às do mhodalan a tha air an sealltainn nuair a phutas tu taobh a-muigh a’ mhodail.
Tro fheartan dàta
Cuir modal an gnìomh gun a bhith a’ sgrìobhadh JavaScript. Suidhich data-bs-toggle="modal"
air eileamaid rianadair, mar phutan, còmhla ri a data-bs-target="#foo"
no href="#foo"
gus amas air modal sònraichte airson gluasad.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Air sgàth javascript
Cruthaich modal le aon loidhne de JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-
, mar ann an data-bs-backdrop=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
backdrop |
boolean no an t-sreang'static' |
true |
A’ toirt a-steach eileamaid cùl-raon modal. Air neo, sònraich static airson cùl-raon nach dùin am modal air cliogadh. |
keyboard |
boolean | true |
Dùin am modal nuair a thèid an iuchair teiche a bhrùthadh |
focus |
boolean | true |
A’ cur fòcas air a’ mhodal nuair a thèid a thòiseachadh. |
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .
Roghainnean seachad
Cuir do shusbaint an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
tog
Tog modal le làimh. Tilleadh chun neach-fios mus deach am modal a shealltainn no fhalach (ie mus tachair an tachartas shown.bs.modal
no an hidden.bs.modal
tachartas).
myModal.toggle()
seall
Le làimh a 'fosgladh modal. Tilleadh chun neach-fios mus deach am modal a shealltainn (ie mus tachair an shown.bs.modal
tachartas).
myModal.show()
Cuideachd, faodaidh tu a dhol seachad air eileamaid DOM mar argamaid a gheibhear anns na tachartasan modal (mar an t- relatedTarget
seilbh).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
seiche
Le làimh a 'falach modal. Tilleadh chun neach-fios mus deach am modal fhalach (ie mus tachair an hidden.bs.modal
tachartas).
myModal.hide()
làimhseachadh Ùrachadh
Leugh le làimh suidheachadh a’ mhodail ma dh’ atharraicheas àirde a’ mhodail fhad ‘s a tha e fosgailte (ie gun fhios nach nochd bàr-scrollaidh).
myModal.handleUpdate()
cuidhteas
A 'sgrios modal eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
myModal.dispose()
faighinn a-steach
Modh statach a leigeas leat an suidheachadh modal fhaighinn co-cheangailte ri eileamaid DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
faighOrCreateInstance
Dòigh statach a leigeas leat an eisimpleir modal fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Tachartasan
Bidh clas modal Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd modal. Tha a h-uile tachartas modal air a losgadh aig a’ mhodal fhèin (ie aig an <div class="modal">
).
Seòrsa tachartas | Tuairisgeul |
---|---|
show.bs.modal |
Bidh an tachartas seo a’ losgadh sa bhad nuair show a chanar ris an dòigh eisimpleir. Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar relatedTarget sheilbh an tachartais. |
shown.bs.modal |
Thèid an tachartas seo a chuir às nuair a bhios am modal ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). Ma thèid adhbhrachadh le cliog, tha an eileamaid a chaidh a bhriogadh ri fhaighinn mar relatedTarget sheilbh an tachartais. |
hide.bs.modal |
Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
hidden.bs.modal |
Thèid an tachartas seo a chuir às nuair a tha am modal deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
hidePrevented.bs.modal |
Tha an tachartas seo air a losgadh nuair a thèid am modal a shealltainn, tha an cùl-raon aige static agus cliog taobh a-muigh a’ mhodail no thèid preas iuchair teicheadh a dhèanamh leis an roghainn meur-chlàr no data-bs-keyboard air a shuidheachadh gu false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})