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:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('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, bodhaig 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="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>
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-toggle="modal" data-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="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>
Cùl-raon statach
Nuair a tha 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-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">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-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 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>
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-*
('s dòcha tro jQuery ) 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-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" 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="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)
})
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').modal('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"
leis gu bheil 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>
Cleachdadh
Bidh am plugan modal a’ togail do shusbaint falaichte a rèir iarrtas, tro bhuadhan dàta no JavaScript. Bidh e cuideachd a’ cur .modal-open
ris a’ <body>
ghiùlan sgrolaidh àbhaisteach a chuir dheth 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-toggle="modal"
air eileamaid rianadair, mar phutan, còmhla ri a data-target="#foo"
no href="#foo"
gus amas air modal sònraichte airson gluasad.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Air sgàth javascript
Cuir fòn gu modal le id myModal
le aon loidhne de JavaScript:
$('#myModal').modal(options)
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-
, mar ann an data-backdrop=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
cùl-raon | boolean no an t-sreang'static' |
fìor | 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. |
meur-chlàr | boolean | fìor | Dùin am modal nuair a thèid an iuchair teiche a bhrùthadh |
fòcas | boolean | fìor | A’ cur fòcas air a’ mhodal nuair a thèid a thòiseachadh. |
seall | boolean | fìor | A’ sealltainn am modal 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 .
.modal(options)
Cuir an t-susbaint agad an gnìomh mar mhodal. A 'gabhail ri roghainnean roghnach object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Tog modal le làimh. Tilleadh chun neach-fios mus deach am modal a shealltainn no fhalachshown.bs.modal
( ie mus tachair an hidden.bs.modal
tachartas).
$('#myModal').modal('toggle')
.modal('show')
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').modal('show')
.modal('hide')
Le làimh a 'falach modal. Tilleadh chun neach-fios mus deach am modal fhalach (ie mus tachair an hidden.bs.modal
tachartas).
$('#myModal').modal('hide')
.modal('handleUpdate')
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').modal('handleUpdate')
.modal('dispose')
A 'sgrios modal eileamaid.
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 |
---|---|
seall.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. |
air a thaisbeanadh.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. |
seiche.bs.modal | Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an hide dòigh eisimpleir a ghairm. |
falaichte.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-keyboard air a shuidheachadh gu false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})