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:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.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="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>
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-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>
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-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>
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-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ð 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 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>
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-bs-*
eiginleika 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-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
})
Skiptu á milli tegunda
Skiptu á milli margra aðferða með snjöllri staðsetningu á data-bs-target
og eigindunum data-bs-toggle
. Til dæmis gætirðu skipt um endurstillingu lykilorðs innan úr þegar opnu innskráningarformi. Vinsamlegast athugaðu að ekki er hægt að opna margar gerðir á sama tíma - þessi aðferð skiptir einfaldlega á milli tveggja aðskildra aðferða.
<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>
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.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>
Fullskjár Modal
Önnur hnekkja er möguleikinn á að skjóta upp sniði sem nær yfir notendaútlitið, fáanlegt í gegnum breytingaflokka sem eru settir á .modal-dialog
.
bekk | Framboð |
---|---|
.modal-fullscreen |
Alltaf |
.modal-fullscreen-sm-down |
Fyrir neðan576px |
.modal-fullscreen-md-down |
Fyrir neðan768px |
.modal-fullscreen-lg-down |
Fyrir neðan992px |
.modal-fullscreen-xl-down |
Fyrir neðan1200px |
.modal-fullscreen-xxl-down |
Fyrir neðan1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Breytur
$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);
Lykkju
Móttækir gerðir á öllum skjánum eru búnar til með $breakpoints
kortinu og lykkju í 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);
}
}
}
}
Notkun
Modal viðbótin skiptir um falið efni eftir beiðni, með gagnaeiginleikum eða JavaScript. Það hnekkir einnig sjálfgefnum skrunhegðun og býr .modal-backdrop
til smellisvæði til að hafna sýndum formum þegar smellt er utan formsins.
Í gegnum gagnaeiginleika
Virkjaðu form án þess að skrifa JavaScript. Stillt data-bs-toggle="modal"
á stjórnunareiningu, eins og hnapp, ásamt a data-bs-target="#foo"
eða href="#foo"
til að miða á ákveðna aðferð til að skipta.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Með JavaScript
Búðu til form með einni línu af JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Valmöguleikar
Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-
, eins og í data-bs-backdrop=""
.
Nafn | Tegund | Sjálfgefið | Lýsing |
---|---|---|---|
backdrop |
Boolean eða strengurinn'static' |
true |
Inniheldur modal-bakgrunnsþátt. Að öðrum kosti, tilgreindu static fyrir bakgrunn sem lokar ekki forminu þegar smellt er. |
keyboard |
Boolean | true |
Lokar forminu þegar ýtt er á escape takkann |
focus |
Boolean | true |
Setur fókusinn á formið þegar það er frumstillt. |
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ð .
Framhjávalkostir
Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
skipta
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.toggle()
sýna
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.show()
Einnig er hægt að senda DOM frumefni sem rök sem hægt er að taka á móti í formlegum atburðum (sem relatedTarget
eign).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
fela sig
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.hide()
handleUpdate
Stilltu handvirkt stöðu mótans ef hæð mótals breytist á meðan hann er opinn (þ.e. ef skrunstika birtist).
myModal.handleUpdate()
farga
Eyðileggur form frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)
myModal.dispose()
getTilvik
Static aðferð sem gerir þér kleift að fá modal tilvikið tengt DOM frumefni
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Statísk aðferð sem gerir þér kleift að fá tilvikið tengt DOM frumefni, eða búa til nýtt ef það var ekki frumstillt
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
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 viðburð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. |
shown.bs.modal |
Þ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-bs-keyboard stillt á false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})