Modāls
Izmantojiet Bootstrap JavaScript modālo spraudni, lai savai vietnei pievienotu dialoglodziņus gaismas kārbām, lietotāju paziņojumiem vai pilnībā pielāgotam saturam.
Kā tas strādā
Pirms sākat darbu ar Bootstrap modālo komponentu, noteikti izlasiet šo, jo mūsu izvēlnes opcijas nesen ir mainījušās.
- Modāļi ir veidoti, izmantojot HTML, CSS un JavaScript. Tie ir novietoti virs visa pārējā dokumentā un noņem ritināšanu,
<body>
lai tā vietā ritinātu modālais saturs. - Noklikšķinot uz modālā fona kolāža, modāls tiks automātiski aizvērts.
- Bootstrap vienlaikus atbalsta tikai vienu modālo logu. Ligzdotie modāļi netiek atbalstīti, jo uzskatām, ka tie rada sliktu lietotāja pieredzi.
- Modāļi izmanto
position: fixed
, kas dažkārt var nedaudz atšķirties no tā renderēšanas. Kad vien iespējams, novietojiet modālo HTML augstākā līmeņa pozīcijā, lai izvairītos no iespējamiem traucējumiem no citiem elementiem. Visticamāk, jums radīsies problēmas, ligzdojot a.modal
citā fiksētā elementā. - Atkal sakarā
position: fixed
ar modālu izmantošanu mobilajās ierīcēs ir daži brīdinājumi. Detalizētu informāciju skatiet mūsu pārlūkprogrammas atbalsta dokumentos . - Tā kā HTML5 definē savu semantiku, HTML
autofocus
atribūts Bootstrap modālos neietekmē. Lai sasniegtu tādu pašu efektu, izmantojiet kādu pielāgotu JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Turpiniet lasīt demonstrācijas un lietošanas vadlīnijas.
Piemēri
Modālās sastāvdaļas
Tālāk ir sniegts statisks modāls piemērs (tas nozīmē, ka tā position
un display
ir ignorētas). Iekļauta modālā galvene, modālais pamatteksts (nepieciešams padding
) un modālā kājene (neobligāti). Mēs lūdzam jūs iekļaut modālas galvenes ar noraidīšanas darbībām, kad vien iespējams, vai nodrošināt citu skaidru noraidīšanas darbību.
<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>
Demo tiešraidē
Pārslēdziet strādājošu modālu demonstrāciju, noklikšķinot uz tālāk esošās pogas. Tas noslīdēs uz leju un pazudīs no lapas augšdaļas.
<!-- 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>
Statisks fons
Ja fona kolāža ir iestatīta uz statisku, modāls netiks aizvērts, noklikšķinot ārpus tā. Noklikšķiniet uz tālāk esošās pogas, lai to izmēģinātu.
<!-- 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>
Gara satura ritināšana
Ja modāļi kļūst pārāk gari lietotāja skata logam vai ierīcei, tie ritina neatkarīgi no pašas lapas. Izmēģiniet tālāk redzamo demonstrāciju, lai redzētu, ko mēs domājam.
Varat arī izveidot ritināmu modālu, kas ļauj ritināt modālā pamattekstu, .modal-dialog-scrollable
pievienojot .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikāli centrēts
Pievienot .modal-dialog-centered
, .modal-dialog
lai vertikāli centrētu modālu.
<!-- 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>
Rīku padomi un uznirstošie elementi
Rīku padomus un uznirstošos logus pēc vajadzības var ievietot modālos. Kad modāļi ir aizvērti, visi rīka padomi un uznirstošie elementi arī tiek automātiski noraidīti.
<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>
Izmantojot režģi
Izmantojiet Bootstrap režģa sistēmu modālā, ligzdojot .container-fluid
. .modal-body
Pēc tam izmantojiet parastās režģa sistēmas klases tāpat kā jebkur citur.
<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>
Dažāds modālais saturs
Vai jums ir vairākas pogas, kas aktivizē vienu un to pašu modāli ar nedaudz atšķirīgu saturu? Izmantojiet event.relatedTarget
un HTML data-bs-*
atribūtus , lai mainītu modāla saturu atkarībā no tā, kura poga tika noklikšķināta.
Zemāk ir tiešraides demonstrācija, kam seko HTML un JavaScript piemēri. Lai iegūtu papildinformāciju, izlasiet modālo notikumu dokumentus , lai iegūtu sīkāku informāciju par 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
})
Pārslēgties starp modāliem
Pārslēdzieties starp vairākiem modāliem, gudri izvietojot data-bs-target
un data-bs-toggle
atribūtus. Piemēram, varat pārslēgt paroles atiestatīšanas modālu no jau atvērta pierakstīšanās modāla. Lūdzu, ņemiet vērā, ka vienlaikus nevar atvērt vairākus modālus — šī metode vienkārši pārslēdzas starp diviem atsevišķiem modāliem.
<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">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">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>
Mainīt animāciju
$modal-fade-transform
Mainīgais nosaka transformācijas stāvokli .modal-dialog
pirms modālās izbalēšanas animācijas, mainīgais $modal-show-transform
nosaka transformāciju .modal-dialog
modālās izbalēšanas animācijas beigās.
Ja vēlaties, piemēram, tuvināt animāciju, varat iestatīt $modal-fade-transform: scale(.8)
.
Noņemt animāciju
Modāliem, kas vienkārši parādās, nevis izgaist, lai skatītu, noņemiet .fade
klasi no modālā marķējuma.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamiskie augstumi
Ja modāla augstums mainās, kamēr tas ir atvērts, jums jāzvana myModal.handleUpdate()
, lai pielāgotu modāla pozīciju, ja parādās ritjosla.
Pieejamība
Noteikti pievienojiet aria-labelledby="..."
, atsaucoties uz modālo nosaukumu, uz .modal
. Turklāt varat sniegt modālā dialoga aprakstu, aria-describedby
izmantojot .modal
. Ņemiet vērā, ka jums nav jāpievieno, role="dialog"
jo mēs to jau pievienojam, izmantojot JavaScript.
YouTube videoklipu iegulšana
Lai iegultu YouTube videoklipus modālos, ir nepieciešams papildu JavaScript, kas nav Bootstrap, lai automātiski apturētu atskaņošanu un daudz ko citu. Lai iegūtu papildinformāciju, skatiet šo noderīgo Stack Overflow ziņu .
Izvēles izmēri
Modāļiem ir trīs izvēles izmēri, kas ir pieejami modifikatoru klasēs, lai tos ievietotu .modal-dialog
. Šie izmēri tiek aktivizēti noteiktos pārtraukuma punktos, lai izvairītos no horizontālām ritjoslām šaurākos skata portos.
Izmērs | Klase | Modālais maksimālais platums |
---|---|---|
Mazs | .modal-sm |
300px |
Noklusējums | Nav | 500px |
Liels | .modal-lg |
800px |
Īpaši liels | .modal-xl |
1140px |
Mūsu noklusējuma modāls bez modifikatoru klases veido “vidēja” izmēra modālu.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Pilnekrāna režīms
Vēl viena ignorēšana ir iespēja uznirstināt modālu, kas aptver lietotāja skata logu, kas ir pieejams, izmantojot modifikatoru klases, kas novietotas uz .modal-dialog
.
Klase | Pieejamība |
---|---|
.modal-fullscreen |
Vienmēr |
.modal-fullscreen-sm-down |
Zemāk576px |
.modal-fullscreen-md-down |
Zemāk768px |
.modal-fullscreen-lg-down |
Zemāk992px |
.modal-fullscreen-xl-down |
Zemāk1200px |
.modal-fullscreen-xxl-down |
Zemāk1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Mainīgie lielumi
$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);
Cilpa
Adaptīvi pilnekrāna modāli tiek ģenerēti, izmantojot $breakpoints
karti un cilpu 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);
}
}
}
}
Lietošana
Modālais spraudnis pēc pieprasījuma pārslēdz jūsu slēpto saturu, izmantojot datu atribūtus vai JavaScript. Tas arī ignorē noklusējuma ritināšanas darbību un ģenerē, .modal-backdrop
lai nodrošinātu klikšķa apgabalu parādīto modāļu noraidīšanai, noklikšķinot ārpus modāla.
Izmantojot datu atribūtus
Pārslēgt
Aktivizējiet modālu, neierakstot JavaScript. Iestatiet data-bs-toggle="modal"
kontroliera elementu, piemēram, pogu, kopā ar data-bs-target="#foo"
vai href="#foo"
, lai atlasītu konkrētu modālu, lai pārslēgtu.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Atlaist
Atlaišanu var panākt , izmantojot modāladata
pogas atribūtu, kā parādīts tālāk:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
vai uz pogas ārpus modāla , izmantojot data-bs-target
tālāk norādīto:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Izmantojot JavaScript
Izveidojiet modālu ar vienu JavaScript rindiņu:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-
, tāpat kā data-bs-backdrop=""
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
backdrop |
Būla vērtība vai virkne'static' |
true |
Ietver modāla fona elementu. Vai arī norādiet static fona kolāžu, kas neaizver modālu, noklikšķinot. |
keyboard |
Būla | true |
Aizver modālu, kad tiek nospiests evakuācijas taustiņš |
focus |
Būla | true |
Inicializācijas laikā fokuss tiek likts uz modālu. |
Metodes
Asinhronās metodes un pārejas
Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .
Nodošanas iespējas
Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
pārslēgt
Manuāli pārslēdz modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski parādīts vai paslēpts (ti, pirms notiek notikums shown.bs.modal
vai ).hidden.bs.modal
myModal.toggle()
parādīt
Manuāli atver modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski parādīts (ti, pirms shown.bs.modal
notikuma).
myModal.show()
Varat arī nodot DOM elementu kā argumentu, ko var saņemt modālajos notikumos (kā relatedTarget
rekvizītu).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
paslēpties
Manuāli slēpj modālu. Atgriežas pie zvanītāja, pirms modāls ir faktiski paslēpts (ti, pirms hidden.bs.modal
notikuma).
myModal.hide()
rokturisUpdate
Manuāli pārregulējiet modāļa pozīciju, ja modāla augstums mainās, kamēr tas ir atvērts (ti, ja parādās ritjosla).
myModal.handleUpdate()
atbrīvoties
Iznīcina elementa modālu. (Noņem DOM elementā saglabātos datus)
myModal.dispose()
getInstance
Statiskā metode, kas ļauj iegūt modālo instanci, kas saistīta ar DOM elementu
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Statiskā metode, kas ļauj iegūt modālo gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Pasākumi
Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti. Visi modālie notikumi tiek aktivizēti uz pašu modālu (ti, uz <div class="modal">
).
Pasākuma veids | Apraksts |
---|---|
show.bs.modal |
Šis notikums tiek aktivizēts nekavējoties, kad show tiek izsaukta instances metode. Ja to izraisījis klikšķis, noklikšķinātais elements ir pieejams kā relatedTarget notikuma īpašums. |
shown.bs.modal |
Šis notikums tiek aktivizēts, kad modāls ir padarīts redzams lietotājam (pagaidīs, kamēr CSS pārejas tiks pabeigtas). Ja to izraisījis klikšķis, noklikšķinātais elements ir pieejams kā relatedTarget notikuma īpašums. |
hide.bs.modal |
Šis notikums tiek aktivizēts nekavējoties, kad hide ir izsaukta instances metode. |
hidden.bs.modal |
Šis notikums tiek aktivizēts, kad modāls ir beidzis slēpt no lietotāja (pagaidīs, līdz CSS pārejas tiks pabeigtas). |
hidePrevented.bs.modal |
Šis notikums tiek aktivizēts, kad tiek parādīts modāls, tā fons static un tiek veikts klikšķis ārpus modāla vai tiek nospiests atkāpšanās taustiņš ar tastatūras opciju vai data-bs-keyboard iestatītu uz false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})