Modaalne
Kasutage Bootstrapi JavaScripti modaalset pistikprogrammi, et lisada oma saidile dialoogid valguskastide, kasutajate märguannete või täielikult kohandatud sisu jaoks.
Kuidas see töötab
Enne Bootstrapi modaalkomponendiga alustamist lugege kindlasti järgmist, kuna meie menüüvalikud on hiljuti muutunud.
- Modaalid on üles ehitatud HTML-i, CSS-i ja JavaScriptiga. Need asuvad dokumendis kõige muu kohal ja eemaldavad kerimise,
<body>
nii et selle asemel keritakse modaalset sisu. - Klõpsates modaalsel taustadekoratsioonil, suletakse modaal automaatselt.
- Bootstrap toetab korraga ainult ühte modaalset akent. Pesastatud modaale ei toetata, kuna usume, et need on kehvad kasutuskogemused.
- Modaalid kasutavad
position: fixed
, mis võib mõnikord olla selle renderdamisel pisut eriline. Võimaluse korral asetage oma modaalne HTML kõrgeimale tasemele, et vältida teiste elementide võimalikke häireid. Tõenäoliselt tekib probleeme.modal
teise fikseeritud elemendi pesastamisel. - Jällegi, tänu
position: fixed
, on mobiilseadmetes modaalide kasutamisel mõned hoiatused. Vaadake üksikasju meie brauseri tugidokumentidest . - HTML5 semantika määratlemise tõttu ei mõjuta HTML-i atribuut Bootstrapi modaalides
autofocus
. Sama efekti saavutamiseks kasutage mõnda kohandatud JavaScripti:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
meediumipäringust. Vaadake
meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .
Jätkake demode ja kasutusjuhiste lugemist.
Näited
Modaalsed komponendid
Allpool on staatiline modaalne näide (see tähendab, et selle position
ja display
on tühistatud). Kaasatud on modaalne päis, modaalne keha (nõutav jaoks padding
) ja modaalne jalus (valikuline). Palume teil võimaluse korral lisada modaalsed päised koos loobumistoimingutega või esitada mõni muu selgesõnaline loobumistoiming.
<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>
Live demo
Lülitage töötav modaaldemo sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.
<!-- 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>
Staatiline taust
Kui taust on seatud staatiliseks, ei sulgu modaal sellest väljaspool klõpsates. Proovimiseks klõpsake alloleval nupul.
<!-- 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>
Pika sisu kerimine
Kui modaalid muutuvad kasutaja vaateava või seadme jaoks liiga pikaks, kerivad need lehest endast sõltumatult. Proovige allolevat demo, et näha, mida me mõtleme.
Saate luua ka keritava modaali, mis võimaldab kerida modaalkeha, lisades .modal-dialog-scrollable
sellele .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikaalselt tsentreeritud
Modaali vertikaalseks keskpunktiks .modal-dialog-centered
lisamine ..modal-dialog
<!-- 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>
Tööriistanõuanded ja hüpikaknad
Vajadusel saab modaalidesse paigutada tööriistavihjeid ja hüpikaknaid . Kui modaalid on suletud, jäetakse automaatselt kõrvale ka kõik tööriistaspikrid ja hüpikaknad.
<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>
Võre kasutamine
Kasutage modaalis Bootstrapi ruudustikusüsteemi , pesatades .container-fluid
. .modal-body
Seejärel kasutage tavalisi ruudustikusüsteemi klasse nagu mujal.
<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>
Muutuv modaalne sisu
Kas teil on hunnik nuppe, mis kõik käivitavad sama modaali ja veidi erineva sisuga? Kasutage modaali sisu muutmiseks atribuuteevent.relatedTarget
ja HTMLdata-bs-*
-i , olenevalt sellest, millist nuppu klõpsati.
Allpool on reaalajas demo, millele järgneb HTML-i ja JavaScripti näide. Lisateabe saamiseks lugege üksikasju kohta modaalsete sündmuste dokumentidestrelatedTarget
.
<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
})
Modaalide vahel lülitumine
Lülitage mitme modaali vahel, kasutades atribuutide data-bs-target
ja nutikat paigutust. data-bs-toggle
Näiteks võite parooli lähtestamise modaali sisse lülitada juba avatud sisselogimismodaalis. Pange tähele, et mitut modaali ei saa korraga avada – see meetod lülitub lihtsalt kahe erineva modaali vahel.
<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>
Muuda animatsiooni
Muutuja $modal-fade-transform
määrab teisendusoleku .modal-dialog
enne modaalset sumbuvat animatsiooni, $modal-show-transform
muutuja määrab teisenduse .modal-dialog
modaalse sumbumise animatsiooni lõpus.
Kui soovite näiteks suumimisanimatsiooni, saate määrata $modal-fade-transform: scale(.8)
.
Eemalda animatsioon
Modaalide puhul, mis lihtsalt ilmuvad, mitte ei tuhmu vaatamiseks, eemaldage .fade
klass oma modaalimärgistusest.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dünaamilised kõrgused
Kui modaali kõrgus muutub, kui see on avatud, peaksite helistama myModal.handleUpdate()
, et modaali asukohta uuesti reguleerida juhuks, kui ilmub kerimisriba.
Juurdepääsetavus
Kindlasti lisage aria-labelledby="..."
, viidates modaalsele pealkirjale, .modal
. Lisaks võite anda oma modaalse dialoogi aria-describedby
kirjelduse .modal
. Pange tähele, et te ei pea lisama, role="dialog"
kuna lisame selle juba JavaScripti kaudu.
YouTube'i videote manustamine
YouTube'i videote modaalidesse manustamiseks on vaja täiendavat JavaScripti, mis ei ole Bootstrapis, et taasesitus automaatselt peatada ja palju muud. Lisateabe saamiseks vaadake seda kasulikku Stack Overflow postitust .
Valikulised suurused
Modaalidel on kolm valikulist suurust, mis on saadaval modifikaatoriklasside kaudu, mis asetatakse .modal-dialog
. Need suurused rakenduvad teatud murdepunktides, et vältida kitsamates vaateavades horisontaalseid kerimisribasid.
Suurus | Klass | Modaalne maksimaalne laius |
---|---|---|
Väike | .modal-sm |
300px |
Vaikimisi | Mitte ühtegi | 500px |
Suur | .modal-lg |
800px |
Väga suur | .modal-xl |
1140px |
Meie vaikimisi modaal ilma modifikaatorita klassi moodustab "keskmise" suurusega modaali.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Täisekraani modaal
Teine alistamine on võimalus avada modaal, mis katab kasutaja vaateava, mis on saadaval modifikaatoriklasside kaudu, mis on paigutatud .modal-dialog
.
Klass | Kättesaadavus |
---|---|
.modal-fullscreen |
Alati |
.modal-fullscreen-sm-down |
allpool576px |
.modal-fullscreen-md-down |
allpool768px |
.modal-fullscreen-lg-down |
allpool992px |
.modal-fullscreen-xl-down |
allpool1200px |
.modal-fullscreen-xxl-down |
allpool1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Muutujad
$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);
Loop
Reageerivad täisekraani modaalid genereeritakse $breakpoints
kaardi ja tsükli kaudu 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);
}
}
}
}
Kasutamine
Modaalne pistikprogramm lülitab teie peidetud sisu nõudmisel andmeatribuutide või JavaScripti kaudu sisse. Samuti alistab see kerimise vaikekäitumise ja loob .modal-backdrop
klõpsuala kuvatavate modaalide kõrvalejätmiseks, kui klõpsate väljaspool modaali.
Andmeatribuutide kaudu
Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-bs-toggle="modal"
kontrolleri element, nagu nupp, koos data-bs-target="#foo"
või href="#foo"
, et sihtida ümberlülitamiseks konkreetset modaali.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
JavaScripti kaudu
Looge modaal ühe JavaScripti reaga:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-bs-
, nagu data-bs-backdrop=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
backdrop |
tõeväärtus või string'static' |
true |
Sisaldab modaalset taustaelementi. Teise võimalusena määrake static taust, mis ei sulge modaali klõpsamisel. |
keyboard |
tõeväärtus | true |
Sulgeb modaali, kui vajutada paoklahvi |
focus |
tõeväärtus | true |
Initsialiseerimisel keskendutakse modaalile. |
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .
Mööduvalikud
Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
lüliti
Lülitab modaali käsitsi ümber. Naaseb helistaja juurde enne, kui modaal on tegelikult näidatud või peidetud (st enne shown.bs.modal
võihidden.bs.modal
sündmuse toimumist).
myModal.toggle()
näidata
Avab modaali käsitsi. Naaseb helistaja juurde enne, kui modaali on tegelikult näidatud (st enne shown.bs.modal
sündmuse toimumist).
myModal.show()
Samuti saate edastada DOM-i elemendi argumendina, mida saab modaalsetes sündmustes vastu võtta ( relatedTarget
atribuudina).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
peita
Peidab modaali käsitsi. Naaseb helistaja juurde enne, kui modaal on tegelikult peidetud (st enne hidden.bs.modal
sündmuse toimumist).
myModal.hide()
käepideUuendus
Reguleerige modaali asendit käsitsi, kui modaali kõrgus muutub avatud olekus (st kui ilmub kerimisriba).
myModal.handleUpdate()
käsutada
Hävitab elemendi modaali. (Eemaldab DOM-elemendile salvestatud andmed)
myModal.dispose()
getInstance
Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud modaalse eksemplari
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud modaalse eksemplari või luua uue juhul, kui seda ei lähtestatud
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Sündmused
Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks. Kõik modaalsündmused käivitatakse modaali enda (st <div class="modal">
) suunas.
Sündmuse tüüp | Kirjeldus |
---|---|
show.bs.modal |
See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTarget sündmuse atribuudina. |
shown.bs.modal |
See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTarget sündmuse atribuudina. |
hide.bs.modal |
See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
hidden.bs.modal |
See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud). |
hidePrevented.bs.modal |
See sündmus käivitatakse, kui modaali kuvatakse, selle taustaks on static ja klõpsatakse väljaspool modaali või tehakse paoklahvi vajutamine klaviatuurivalikuga või data-bs-keyboard väärtusele false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})