Modali
Uża l-plugin modali JavaScript ta' Bootstrap biex iżżid djalogu mas-sit tiegħek għal lightboxes, notifiki tal-utent, jew kontenut kompletament personalizzat.
Kif taħdem
Qabel ma tibda bil-komponent modali ta 'Bootstrap, kun żgur li taqra dan li ġej peress li l-għażliet tal-menu tagħna inbidlu reċentement.
- Modali huma mibnija bl-HTML, CSS, u JavaScript. Qed jitqiegħdu fuq kull ħaġa oħra fid-dokument u neħħi l-iscroll minn
<body>
hekk li l-kontenut modali jiskrollja minflok. - Meta tikklikkja fuq l-"isfond" modali se tagħlaq awtomatikament il-modal.
- Bootstrap jappoġġja biss tieqa modali waħda kull darba. Il-modali mgħaqqda mhumiex appoġġjati peress li nemmnu li huma esperjenzi fqar tal-utent.
- Il-modali jużaw
position: fixed
, li kultant jista 'jkun daqsxejn partikolari dwar ir-rendiment tiegħu. Kull meta jkun possibbli, poġġi l-HTML modali tiegħek f'pożizzjoni tal-ogħla livell biex tevita interferenza potenzjali minn elementi oħra. X'aktarx ikollok problemi meta tbejtu fi.modal
ħdan element fiss ieħor. - Għal darb'oħra, minħabba
position: fixed
, hemm xi twissijiet bl-użu ta 'modals fuq apparat mobbli. Ara d-dokumenti tal-appoġġ tal-browser tagħna għad-dettalji. - Minħabba kif HTML5 jiddefinixxi s-semantika tiegħu, l-
autofocus
attribut HTML m'għandu l-ebda effett fil-modali Bootstrap. Biex tikseb l-istess effett, uża xi JavaScript personalizzat:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Kompli aqra għal demos u linji gwida dwar l-użu.
Eżempji
Komponenti modali
Hawn taħt hemm eżempju modali statikuposition
(li jfisser tiegħu u display
ġew sostitwiti). Inklużi huma l-header modali, il-korp modali (meħtieġa għal padding
), u l-footer modali (mhux obbligatorju). Nitolbu li tinkludi headers modali b'azzjonijiet ta' ċaħda kull meta jkun possibbli, jew tipprovdi azzjoni ta' ċaħda espliċita oħra.
<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 live
Aqleb demo modali li taħdem billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.
<!-- 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>
Sfond statiku
Meta l-isfond ikun issettjat għal statiku, il-modal ma jagħlaqx meta tikklikkja barra minnha. Ikklikkja l-buttuna hawn taħt biex tipprovaha.
<!-- 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>
Scrolling kontenut twil
Meta l-modals isiru twal wisq għall-viewport jew l-apparat tal-utent, jiskrollaw indipendentement mill-paġna nnifisha. Ipprova d-demo hawn taħt biex tara xi ngħidu.
Tista 'wkoll toħloq modal li tista' tiskrollja li tippermetti tiskrollja l-korp modali billi żżid .modal-dialog-scrollable
ma ' .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Iċċentrat vertikalment
Żid .modal-dialog-centered
mal .modal-dialog
biex iċċentra vertikalment il-modal.
<!-- 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>
Tooltips u popovers
Tooltips u popovers jistgħu jitqiegħdu fi ħdan modali kif meħtieġ. Meta l-modals jingħalqu, kwalunkwe tooltips u popovers ġewwa huma wkoll awtomatikament miċħuda.
<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>
Bl-użu tal-grilja
Uża s-sistema tal-grilja Bootstrap fi ħdan modali billi tbejtu .container-fluid
fi ħdan il- .modal-body
. Imbagħad, uża l-klassijiet normali tas-sistema tal-grilja kif tagħmel imkien ieħor.
<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>
Kontenut modali li jvarja
Għandek mazz ta 'buttuni li kollha jqanqlu l-istess modal b'kontenut kemmxejn differenti? Uża event.relatedTarget
u attributi HTMLdata-bs-*
biex tvarja l-kontenut tal-modal skont liema buttuna ġiet ikklikkjata.
Hawn taħt hawn demo live segwita b'eżempju HTML u JavaScript. Għal aktar informazzjoni, aqra d-dokumenti tal-avvenimenti modali għad-dettalji fuq 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
})
Aqleb bejn il-modali
Aqleb bejn modali multipli b'xi tqegħid għaqli tal- attributi data-bs-target
u . data-bs-toggle
Pereżempju, tista' taqleb modal ta' reset tal-password minn ġewwa sinjal diġà miftuħ fil-modal. Jekk jogħġbok innota diversi modali ma jistgħux ikunu miftuħa fl-istess ħin — dan il- metodu sempliċement ibiddel bejn żewġ modali separati.
<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>
Ibdel l-animazzjoni
Il- $modal-fade-transform
varjabbli tiddetermina l-istat tat-trasformazzjoni ta' .modal-dialog
qabel l-animazzjoni ta' fade-in modali, il- $modal-show-transform
varjabbli tiddetermina t-trasformazzjoni ta' .modal-dialog
fl-aħħar tal-animazzjoni ta' fade-in modali.
Jekk trid pereżempju animazzjoni zoom-in, tista 'tissettja $modal-fade-transform: scale(.8)
.
Neħħi l-animazzjoni
Għal modals li sempliċiment jidhru aktar milli fade biex tarahom, neħħi l- .fade
klassi mill-markup modali tiegħek.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Għoli dinamiċi
Jekk l-għoli ta' modal jinbidel waqt li jkun miftuħ, għandek ċċempel myModal.handleUpdate()
biex taġġusta mill-ġdid il-pożizzjoni tal-modal f'każ li tidher scrollbar.
Aċċessibilità
Kun żgur li żżid aria-labelledby="..."
, b'referenza għat-titlu modali, għal .modal
. Barra minn hekk, tista' tagħti deskrizzjoni tad-djalogu modali tiegħek aria-describedby
b'on .modal
. Innota li m'għandekx bżonn iżżid role="dialog"
peress li aħna diġà nżiduha permezz ta' JavaScript.
Inkorporazzjoni ta 'vidjows ta' YouTube
L-inkorporazzjoni ta' vidjows ta' YouTube f'modals teħtieġ JavaScript addizzjonali mhux f'Bootstrap biex twaqqaf awtomatikament id-daqq u aktar. Ara din il-post utli ta' Stack Overflow għal aktar informazzjoni.
Daqsijiet fakultattivi
Il-modali għandhom tliet daqsijiet fakultattivi, disponibbli permezz ta' klassijiet ta' modifikaturi biex jitqiegħdu fuq .modal-dialog
. Dawn id-daqsijiet jibdew f'ċerti breakpoints biex jevitaw scrollbars orizzontali fuq viewports idjaq.
Daqs | Klassi | Modali max-wisa ' |
---|---|---|
Żgħir | .modal-sm |
300px |
Default | Xejn | 500px |
Kbir | .modal-lg |
800px |
Kbir żejjed | .modal-xl |
1140px |
Il-modal default tagħna mingħajr il-klassi tal-modifikatur jikkostitwixxi l-modal ta' daqs "medju".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fullscreen Modali
Sostituzzjoni oħra hija l-għażla li titfaċċa modali li tkopri l-viewport tal-utent, disponibbli permezz ta 'klassijiet ta' modifikatur li jitqiegħdu fuq .modal-dialog
.
Klassi | Disponibbiltà |
---|---|
.modal-fullscreen |
Dejjem |
.modal-fullscreen-sm-down |
Hawn taħt576px |
.modal-fullscreen-md-down |
Hawn taħt768px |
.modal-fullscreen-lg-down |
Hawn taħt992px |
.modal-fullscreen-xl-down |
Hawn taħt1200px |
.modal-fullscreen-xxl-down |
Hawn taħt1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Varjabbli
$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
Modali fullscreen li jirrispondu huma ġġenerati permezz tal- $breakpoints
mappa u loop fi 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);
}
}
}
}
Użu
Il-plugin modali jibdel il-kontenut moħbi tiegħek fuq talba, permezz ta' attributi tad-dejta jew JavaScript. Tisboq ukoll l-imġiba ta' scrolling default u tiġġenera a .modal-backdrop
biex tipprovdi żona ta' kklikkja biex tiċħad il-modali murija meta tikklikkja barra l-modal.
Via attributi tad-data
Toggle
Attiva modali mingħajr ma tikteb JavaScript. Issettja data-bs-toggle="modal"
fuq element ta 'kontrollur, bħal buttuna, flimkien ma' data-bs-target="#foo"
jew href="#foo"
biex timmira modal speċifiku biex toggle.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Tkeċċi
It-tkeċċija tista' tinkiseb bl- data
attribut fuq buttuna fi ħdan il-modal kif muri hawn taħt:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
jew fuq buttuna barra l-modal billi tuża data-bs-target
kif muri hawn taħt:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Via JavaScript
Oħloq modali b'linja waħda ta' JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-
, bħal f' data-bs-backdrop=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
backdrop |
boolean jew is-sekwenza'static' |
true |
Jinkludi element ta' sfond modali. Inkella, speċifika static għal sfond li ma jagħlaqx il-modal mal-ikklikkja. |
keyboard |
boolean | true |
Jagħlaq il-modal meta tingħafas iċ-ċavetta tal-ħarba |
focus |
boolean | true |
Tpoġġi l-enfasi fuq il-modal meta tkun inizjalizzata. |
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .
Għażliet li jgħaddu
Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle
Manwalment toggles modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.modal
jew ).hidden.bs.modal
myModal.toggle()
juru
Manwalment tiftaħ modali. Jirritorna lil min iċempel qabel ma l-modal ikun fil-fatt intwera (jiġifieri qabel ma shown.bs.modal
jseħħ l-avveniment).
myModal.show()
Ukoll, tista 'tgħaddi element DOM bħala argument li jista' jiġi riċevut fl-avvenimenti modali (bħala l- relatedTarget
proprjetà).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ħabi
Manwalment jaħbi modali. Jirritorna lil min iċempel qabel ma l-modal fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.modal
jseħħ l-avveniment).
myModal.hide()
handleAġġorna
Aġġusta mill-ġdid manwalment il-pożizzjoni tal-modal jekk l-għoli ta' modal jinbidel waqt li jkun miftuħ (jiġifieri f'każ li tidher scrollbar).
myModal.handleUpdate()
jiddisponi
Jeqred il-modal ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM)
myModal.dispose()
getInstance
Metodu statiku li jippermettilek tikseb l-istanza modali assoċjata ma 'element DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Metodu statiku li jippermettilek li tikseb l-istanza modali assoċjata ma' element DOM, jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Avvenimenti
Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali. L-avvenimenti modali kollha jiġu sparati lejn il-modal innifsu (jiġifieri fil- <div class="modal">
).
Tip ta' avveniment | Deskrizzjoni |
---|---|
show.bs.modal |
Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTarget proprjetà tal-avveniment. |
shown.bs.modal |
Dan l-avveniment jiġi sparat meta l-modal ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). Jekk ikkawżat minn klikk, l-element ikklikkjat huwa disponibbli bħala l- relatedTarget proprjetà tal-avveniment. |
hide.bs.modal |
Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu tal-istanza jkun ġie msejjaħ. |
hidden.bs.modal |
Dan l-avveniment jiġi sparat meta l-modal ikun spiċċa moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
hidePrevented.bs.modal |
Dan l-avveniment jiġi sparat meta jintwera l-modal, l-isfond tiegħu huwa static u ssir ikklikkja barra l-modal jew agħfas ta 'ċavetta ta' escape bl-għażla tat-tastiera jew data-bs-keyboard issettjata għal false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})