Modaal
Gebruik Bootstrap se JavaScript-modale inprop om dialoogvensters by jou werf te voeg vir ligbokse, gebruikerskennisgewings of heeltemal pasgemaakte inhoud.
Hoe dit werk
Voordat u met Bootstrap se modale komponent begin, moet u die volgende lees aangesien ons spyskaartopsies onlangs verander het.
- Modale word gebou met HTML, CSS en JavaScript. Hulle is oor alles anders in die dokument geposisioneer en verwyder rol van die
<body>
sodat modale inhoud eerder blaai. - Deur op die modale "agtergrond" te klik, sal die modale outomaties toemaak.
- Bootstrap ondersteun slegs een modale venster op 'n slag. Geneste modale word nie ondersteun nie, aangesien ons glo dat dit swak gebruikerservarings is.
- Modale gebruik
position: fixed
, wat soms 'n bietjie spesifiek kan wees oor die weergawe daarvan. Waar moontlik, plaas jou modale HTML in 'n topvlak posisie om moontlike inmenging van ander elemente te vermy. U sal waarskynlik probleme ondervind wanneer u 'n.modal
binne 'n ander vaste element nesmaak. - Weereens, as gevolg van
position: fixed
, is daar 'n paar waarskuwings met die gebruik van modale op mobiele toestelle. Sien ons blaaierondersteuningsdokumente vir besonderhede. - As gevolg van hoe HTML5 sy semantiek definieer, het die
autofocus
HTML-kenmerk geen effek in Bootstrap-modale nie. Om dieselfde effek te bereik, gebruik 'n paar persoonlike JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
medianavraag. Sien die
verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .
Hou aan lees vir demonstrasies en gebruiksriglyne.
Voorbeelde
Modale komponente
Hieronder is 'n statiese modale voorbeeld (wat beteken dat dit position
en display
is oorskryf). Ingesluit is die modale kopskrif, modale liggaam (vereis vir padding
), en modale voetskrif (opsioneel). Ons vra dat jy, waar moontlik, modale opskrifte met afwyshandelinge insluit, of 'n ander eksplisiete afwysaksie verskaf.
<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>
Regstreekse demo
Wissel 'n werkende modale demo deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.
<!-- 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>
Statiese agtergrond
Wanneer agtergrond op staties gestel is, sal die modaal nie toemaak wanneer daar buite geklik word nie. Klik op die knoppie hieronder om dit te probeer.
<!-- 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>
Deur lang inhoud te blaai
Wanneer modale te lank word vir die gebruiker se kykpoort of toestel, blaai hulle onafhanklik van die bladsy self. Probeer die demonstrasie hieronder om te sien wat ons bedoel.
Jy kan ook 'n blaaibare modaal skep wat die modale liggaam laat blaai deur by .modal-dialog-scrollable
te voeg .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikaal gesentreer
Voeg .modal-dialog-centered
by .modal-dialog
om die modaal vertikaal te sentreer.
<!-- 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>
Gereedskapwenke en popovers
Tooltips en popovers kan binne modale geplaas word soos nodig. Wanneer modale gesluit is, word enige gereedskapwenke en popovers binne ook outomaties van die hand gewys.
<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>
Gebruik die rooster
Gebruik die Bootstrap-roosterstelsel binne 'n modaal deur .container-fluid
binne die .modal-body
. Gebruik dan die normale roosterstelselklasse soos op enige ander plek.
<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>
Wisselende modale inhoud
Het jy 'n klomp knoppies wat almal dieselfde modaal aktiveer met effens verskillende inhoud? Gebruik event.relatedTarget
en HTML- data-bs-*
kenmerke om die inhoud van die modaal te verander na gelang van watter knoppie geklik is.
Hieronder is 'n lewendige demonstrasie gevolg deur voorbeeld HTML en JavaScript. Vir meer inligting, lees die modale gebeurtenisse dokumente vir besonderhede oor 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
})
Wissel tussen modale
Wissel tussen veelvuldige modale met 'n slim plasing van die data-bs-target
en data-bs-toggle
eienskappe. Byvoorbeeld, jy kan 'n wagwoordterugstelmodaal van binne 'n reeds oop aanmeldmodaal wissel. Neem asseblief kennis dat veelvuldige modale nie gelyktydig oop kan wees nie - hierdie metode wissel eenvoudig tussen twee afsonderlike modale.
<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>
Verander animasie
Die $modal-fade-transform
veranderlike bepaal die transformasietoestand van .modal-dialog
voor die modale inverfop-animasie, die $modal-show-transform
veranderlike bepaal die transformasie van .modal-dialog
aan die einde van die modale-infade-animasie.
As jy byvoorbeeld 'n inzoom-animasie wil hê, kan jy instel $modal-fade-transform: scale(.8)
.
Verwyder animasie
Vir modale wat bloot verskyn eerder as om in te vervaag om te sien, verwyder die .fade
klas van jou modale opmaak.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamiese hoogtes
As die hoogte van 'n modaal verander terwyl dit oop is, moet jy bel myModal.handleUpdate()
om die modaal se posisie aan te pas indien 'n skuifbalk verskyn.
Toeganklikheid
Maak seker dat jy aria-labelledby="..."
, met verwysing na die modale titel, byvoeg .modal
. Daarbenewens kan jy 'n beskrywing van jou modale dialoog gee met aria-describedby
op .modal
. Let daarop dat jy nie hoef by te voeg nie role="dialog"
, aangesien ons dit reeds via JavaScript byvoeg.
Inbedding van YouTube-video's
Om YouTube-video's in modale in te sluit, vereis bykomende JavaScript wat nie in Bootstrap is nie om outomaties afspeel te stop en meer. Sien hierdie nuttige Stack Overflow-plasing vir meer inligting.
Opsionele groottes
Modale het drie opsionele groottes, beskikbaar via wysigerklasse om op 'n .modal-dialog
. Hierdie groottes skop in by sekere breekpunte om horisontale skuifbalke op nouer uitsigpoorte te vermy.
Grootte | Klas | Modale maksimum breedte |
---|---|---|
Klein | .modal-sm |
300px |
Verstek | Geen | 500px |
Groot | .modal-lg |
800px |
Ekstra groot | .modal-xl |
1140px |
Ons verstek modaal sonder wysigerklas vorm die "medium" grootte modaal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Volskerm modaal
Nog 'n oorheersing is die opsie om 'n modaal op te roep wat die gebruikersaansigportaal dek, beskikbaar via wysigerklasse wat op 'n .modal-dialog
.
Klas | Beskikbaarheid |
---|---|
.modal-fullscreen |
Altyd |
.modal-fullscreen-sm-down |
Hieronder576px |
.modal-fullscreen-md-down |
Hieronder768px |
.modal-fullscreen-lg-down |
Hieronder992px |
.modal-fullscreen-xl-down |
Hieronder1200px |
.modal-fullscreen-xxl-down |
Hieronder1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Veranderlikes
$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);
Lus
Responsiewe volskerm-modale word gegenereer via die $breakpoints
kaart en 'n lus in 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);
}
}
}
}
Gebruik
Die modale inprop skakel jou verborge inhoud op aanvraag, via data-kenmerke of JavaScript. Dit ignoreer ook verstek blaai-gedrag en genereer 'n .modal-backdrop
om 'n klikarea te verskaf om gewysde modale te verwyder wanneer daar buite die modaal geklik word.
Via data-eienskappe
Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-bs-toggle="modal"
op 'n beheerderelement, soos 'n knoppie, saam met 'n data-bs-target="#foo"
of href="#foo"
om 'n spesifieke modaal te rig om te wissel.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Via JavaScript
Skep 'n modaal met 'n enkele reël JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-
, soos in data-bs-backdrop=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
backdrop |
boolean of die snaar'static' |
true |
Sluit 'n modale agtergrondelement in. Alternatiewelik, spesifiseer static vir 'n agtergrond wat nie die modaal toemaak met klik nie. |
keyboard |
boolean | true |
Maak die modaal toe wanneer escape-sleutel gedruk word |
focus |
boolean | true |
Plaas die fokus op die modaal wanneer geïnisialiseer. |
Metodes
Asinchroniese metodes en oorgange
Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .
Slaag opsies
Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
wissel
Wissel 'n modaal handmatig. Keer terug na die oproeper voordat die modaal werklik gewys of versteek is (dws voordat die shown.bs.modal
of hidden.bs.modal
gebeurtenis plaasvind).
myModal.toggle()
Wys
Maak 'n modaal handmatig oop. Keer terug na die oproeper voordat die modaal werklik gewys is (dws voor die shown.bs.modal
gebeurtenis plaasvind).
myModal.show()
U kan ook 'n DOM-element deurgee as 'n argument wat in die modale gebeurtenisse (as die relatedTarget
eiendom) ontvang kan word.
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
wegsteek
Versteek 'n modaal handmatig. Keer terug na die oproeper voordat die modaal eintlik versteek is (dws voor die hidden.bs.modal
gebeurtenis plaasvind).
myModal.hide()
handleUpdate
Pas die modaal se posisie handmatig aan as die hoogte van 'n modaal verander terwyl dit oop is (dws indien 'n rolbalk verskyn).
myModal.handleUpdate()
wegdoen
Vernietig 'n element se modaal. (Verwyder gestoorde data op die DOM-element)
myModal.dispose()
getInstance
Statiese metode waarmee u die modale instansie kan kry wat met 'n DOM-element geassosieer word
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Statiese metode wat jou toelaat om die modale instansie wat met 'n DOM-element geassosieer word te kry, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Gebeurtenisse
Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel. Alle modale gebeurtenisse word op die modaal self afgevuur (dws by die <div class="modal">
).
Soort gebeurtenis | Beskrywing |
---|---|
show.bs.modal |
Hierdie gebeurtenis begin onmiddellik wanneer die show instansiemetode geroep word. As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTarget eienskap van die gebeurtenis. |
shown.bs.modal |
Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTarget eienskap van die gebeurtenis. |
hide.bs.modal |
Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hide instansiemetode geroep is. |
hidden.bs.modal |
Hierdie gebeurtenis word afgevuur wanneer die modaal klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi). |
hidePrevented.bs.modal |
Hierdie gebeurtenis word afgevuur wanneer die modaal gewys word, sy agtergrond is static en 'n klik buite die modaal of 'n ontsnap-sleuteldruk word uitgevoer met die sleutelbordopsie of data-bs-keyboard gestel op false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})