Módel
Notaðu Bootstrap's JavaScript modal viðbót til að bæta við gluggum á síðuna þína fyrir ljósakassa, notendatilkynningar eða algjörlega sérsniðið efni.
Hvernig það virkar
Áður en byrjað er með mótalhluta Bootstrap, vertu viss um að lesa eftirfarandi þar sem valmyndarvalkostirnir okkar hafa nýlega breyst.
- Modals eru byggðir með HTML, CSS og JavaScript. Þeir eru staðsettir yfir öllu öðru í skjalinu og fjarlægja skrun úr skjalinu
<body>
þannig að formlegt efni flettir í staðinn. - Með því að smella á „bakgrunninn“ lokast aðferðinni sjálfkrafa.
- Bootstrap styður aðeins einn modal glugga í einu. Hreiður form eru ekki studd þar sem við teljum að þau séu léleg notendaupplifun.
- Modals nota
position: fixed
, sem getur stundum verið svolítið sérstakt varðandi flutning þess. Þegar mögulegt er skaltu setja HTML-sniðið þitt á efstu stigi til að forðast hugsanlega truflun frá öðrum þáttum. Þú munt líklega lenda í vandræðum þegar þú hreiður inn.modal
í annan fastan þátt. - Enn og aftur, vegna
position: fixed
, eru nokkrir fyrirvarar við notkun aðferða í farsímum. Skoðaðu stuðningsskjöl vafrans okkar fyrir frekari upplýsingar. - Vegna þess hvernig HTML5 skilgreinir merkingarfræði sína, hefur
autofocus
HTML eigindin engin áhrif í Bootstrap aðferðum. Til að ná sömu áhrifum skaltu nota sérsniðið JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
miðlunarfyrirspurninni. Sjá
kaflann um minni hreyfingu í aðgengisskjölunum okkar .
Haltu áfram að lesa fyrir kynningar og notkunarleiðbeiningar.
Dæmi
Móthlutar
Hér að neðan er kyrrstætt dæmi (sem þýðir að það er position
og display
hefur verið hnekkt). Innifalið eru haus, módel meginmál (nauðsynlegt fyrir padding
) og tegundarfótur (valfrjálst). Við biðjum þig um að láta hausa fylgja með frávísunaraðgerðum þegar mögulegt er, eða gefa upp aðra skýra frávísunaraðgerð.
<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>
Sýning í beinni
Skiptu um virka sýnikennslu með því að smella á hnappinn hér að neðan. Það mun renna niður og hverfa inn efst á síðunni.
<!-- 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>
Statískt bakgrunn
Þegar bakgrunnur er stilltur á kyrrstöðu, mun mótalinn ekki lokast þegar smellt er fyrir utan það. Smelltu á hnappinn hér að neðan til að prófa.
<!-- 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>
Fletta langt efni
Þegar snið verða of löng fyrir útsýnisgátt eða tæki notandans, fletta þau óháð síðunni sjálfri. Prófaðu kynninguna hér að neðan til að sjá hvað við meinum.
Þú getur líka búið til flettanlegt form sem gerir kleift að fletta meginmálinu með því að bæta .modal-dialog-scrollable
við .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Lóðrétt miðju
Bættu .modal-dialog-centered
við til .modal-dialog
að miðja mótalinn lóðrétt.
<!-- 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>
Verkfæraráð og popovers
Hægt er að setja verkfæraábendingar og popover innan forms eftir þörfum. Þegar aðferðum er lokað er öllum tólaábendingum og sprettigluggum innan þeirra einnig sjálfkrafa vísað frá.
<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ð nota ristina
Notaðu Bootstrap grid kerfið innan forms með því að hreiðra .container-fluid
innan .modal-body
. Notaðu síðan venjulega kerfisflokkana eins og þú myndir gera annars staðar.
<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>
Mismunandi efnisform
Ertu með fullt af hnöppum sem kveikja allir á sama forminu með aðeins mismunandi innihaldi? Notaðu event.relatedTarget
og HTML data-*
eiginleika (hugsanlega í gegnum jQuery ) til að breyta innihaldi formsins eftir því hvaða hnapp var smellt á.
Hér að neðan er lifandi kynning og fylgt eftir með HTML og JavaScript. Fyrir frekari upplýsingar, lestu skjölin fyrir modal events til að fá upplýsingar um 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)
})
Breyta hreyfimynd
Breytan $modal-fade-transform
ákvarðar umbreytingarástandið .modal-dialog
áður en hlífðarmyndin fölnar inn, $modal-show-transform
breytan ákvarðar umbreytinguna á .modal-dialog
í lok hlífðarfjörsins.
Ef þú vilt til dæmis aðdráttarhreyfingu geturðu stillt $modal-fade-transform: scale(.8)
.
Fjarlægðu hreyfimyndir
Fyrir snið sem einfaldlega birtast frekar en að hverfa inn til að skoða, fjarlægðu .fade
flokkinn úr aðferðamerkingunni þinni.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dýnamískar hæðir
Ef hæð mótals breytist á meðan hann er opinn, ættir þú að hringja $('#myModal').modal('handleUpdate')
til að endurstilla stöðu mótalsins ef skrunstikan birtist.
Aðgengi
Vertu viss um að bæta við aria-labelledby="..."
, með vísan til formúlunnar, við .modal
. Að auki geturðu gefið lýsingu á valmyndinni þinni með aria-describedby
á .modal
. Athugaðu að þú þarft ekki að bæta role="dialog"
því við þar sem við bætum því nú þegar við með JavaScript.
Fella inn YouTube myndbönd
Að fella inn YouTube myndbönd í modals krefst viðbótar JavaScript sem er ekki í Bootstrap til að stöðva spilun sjálfkrafa og fleira. Sjá þessa gagnlegu Stack Overflow færslu fyrir frekari upplýsingar.
Valfrjálsar stærðir
Modals hafa þrjár valfrjálsar stærðir, fáanlegar í gegnum breytingaflokka til að setja á .modal-dialog
. Þessar stærðir koma inn á ákveðnum brotstöðum til að forðast láréttar skrunstikur á þrengri útsýnisgluggum.
Stærð | bekk | Hámarksbreidd módel |
---|---|---|
Lítil | .modal-sm |
300px |
Sjálfgefið | Enginn | 500px |
Stórt | .modal-lg |
800px |
Auka stór | .modal-xl |
1140px |
Sjálfgefna aðferðin okkar án breytingaflokks er „miðlungs“ stærð aðferðarinnar.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Notkun
Modal viðbótin skiptir um falið efni eftir beiðni, með gagnaeiginleikum eða JavaScript. Það bætir einnig við .modal-open
að <body>
hnekkja sjálfgefnum skrunhegðun og býr .modal-backdrop
til smellisvæði til að hafna sýndum aðferðum þegar smellt er utan aðferðarinnar.
Í gegnum gagnaeiginleika
Virkjaðu form án þess að skrifa JavaScript. Stillt data-toggle="modal"
á stjórnunareiningu, eins og hnapp, ásamt a data-target="#foo"
eða href="#foo"
til að miða á ákveðna aðferð til að skipta.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Með JavaScript
Hringdu í modal með auðkenni myModal
með einni línu af JavaScript:
$('#myModal').modal(options)
Valmöguleikar
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-
, eins og í data-backdrop=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
bakgrunn | Boolean eða strengurinn'static' |
satt | Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu static fyrir bakgrunn sem lokar ekki forminu þegar smellt er. |
lyklaborð | Boolean | satt | Lokar forminu þegar ýtt er á escape takkann |
fókus | Boolean | satt | Setur fókusinn á formið þegar það er frumstillt. |
sýna | Boolean | satt | Sýnir aðferðina þegar hann er frumstilltur. |
Aðferðir
Ósamstilltar aðferðir og umskipti
Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .
.modal(options)
Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Skiptir handvirkt um form. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.modal
eða hidden.bs.modal
á sér stað).
$('#myModal').modal('toggle')
.modal('show')
Opnar form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd (þ.e. áður en shown.bs.modal
atburðurinn á sér stað).
$('#myModal').modal('show')
.modal('hide')
Felur form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið falin (þ.e. áður en hidden.bs.modal
atburðurinn á sér stað).
$('#myModal').modal('hide')
.modal('handleUpdate')
Stilltu handvirkt stöðu mótans ef hæð mótals breytist á meðan hann er opinn (þ.e. ef skrunstika birtist).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Eyðileggur form frumefnis.
Viðburðir
Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni. Öllum mótaviðburðum er skotið á mótalann sjálfan (þ.e. á <div class="modal">
).
Tegund atburðar | Lýsing |
---|---|
show.bs.modal | Þessi atburður ræsir strax þegar show tilviksaðferðin er kölluð. Ef smellt er af völdum er smellt þáttur tiltækur sem relatedTarget eign atburðarins. |
sýnd.bs.módel | Þessi atburður er ræstur þegar modal hefur verið gert sýnilegt notandanum (bíður eftir að CSS umbreytingum ljúki). Ef smellt er af völdum er smellt þáttur tiltækur sem relatedTarget eign atburðarins. |
hide.bs.modal | Þessi atburður er ræstur strax þegar hide tilviksaðferðin hefur verið kölluð. |
hidden.bs.modal | Þessi atburður er ræstur þegar aðferðin hefur lokið við að vera falin fyrir notandanum (mun bíða eftir að CSS umbreytingum ljúki). |
hidePrevented.bs.modal | Þessi atburður er ræstur þegar aðferðin er sýnd, bakgrunnur hennar er static og smellur fyrir utan aðferðina eða ýtt á escape takka er framkvæmd með lyklaborðsvalkostinum eða data-keyboard stillt á false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})