Modal
Shandisa Bootstrap's JavaScript modal plugin kuti uwedzere dialog kune yako saiti yemabhokisi emwenje, zviziviso zvevashandisi, kana zvizere zvemukati zvemukati.
Zvinoshanda sei
Usati watanga neBootstrap's modal component, iva nechokwadi chekuverenga zvinotevera sezvo sarudzo dzedu dzemenu dzakangochinja.
- Modals dzakavakwa neHTML, CSS, uye JavaScript. Ivo vakamisikidzwa pamusoro pezvimwe zvese zviri mugwaro uye bvisa mupumburu kubva kune
<body>
kuti modal zvemukati zvipumburuke panzvimbo. - Kudzvanya pane modal "kumashure" kunozovhara modal.
- Bootstrap inongotsigira imwe modal hwindo panguva. Nested modals hadzitsigirwe sezvo isu tichitenda kuti hadzina ruzivo rwevashandisi.
- Modals inoshandisa
position: fixed
, iyo dzimwe nguva inogona kuve yakati wandei nezve kupa kwayo. Pese pazvinogoneka, isa yako modal HTML munzvimbo yepamusoro-yepamusoro kudzivirira kukanganisa kunogona kubva kune zvimwe zvinhu. Iwe ungangosangana nematambudziko kana uchinge waisa.modal
mukati mechimwe chinhu chakagadziriswa. - Zvekare, nekuda kwe
position: fixed
, kune mamwe macaveats nekushandisa modal pane nharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo. - Nekuda kwekuti HTML5 inotsanangura sei semantics yayo, iyo
autofocus
HTML hunhu haina mhedzisiro muBootstrap modal. Kuti uwane maitiro akafanana, shandisa imwe tsika JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
nemubvunzo wenhau. Ona chikamu
chakaderedzwa chezvinyorwa zvedu zvekusvikika .
Ramba uchiverengera demos uye nhungamiro yekushandisa.
Mienzaniso
Modal components
Pazasi pane static modal muenzaniso (zvichireva kuti position
uye display
zvakapfuura). Inosanganisirwa iyo modal musoro, modal muviri (inodiwa padding
), uye modal footer (sarudzo). Tinokumbira kuti ubatanidze misoro yemodal ine zviito zvekudzinga pese pazvinogoneka, kana kuti upe chimwe chiito chakajeka chekudzinga.
<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
Shandura demodhi yekushanda nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.
<!-- 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>
Static backdrop
Kana kuseri kwakaiswa kune static, modal haivhare kana uchidzvanya kunze kwayo. Baya bhatani riri pazasi kuti uzviedze.
<!-- 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>
Kupuruzira zvemukati marefu
Kana modal dzarebesa pakuona kwemushandisi kana mudziyo, ivo vanofamba vakazvimiririra kubva papeji pachayo. Edza demo pazasi kuti uone zvatiri kureva.
Iwe unogona zvakare kugadzira modal inotenderera inobvumira kupuruzira modal muviri nekuwedzera .modal-dialog-scrollable
kune .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertically pakati
Wedzera .modal-dialog-centered
kune .modal-dialog
vertically pakati 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 uye popovers
Zvishandiso uye popovers zvinogona kuiswa mukati memodals sezvinodiwa. Kana modal dzakavharwa, chero maturusi ezvishandiso uye mapopovers mukati anoraswa otomatiki.
<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>
Kushandisa grid
Shandisa iyo Bootstrap grid system mukati me modal nekuisa .container-fluid
mukati meiyo .modal-body
. Zvadaro, shandisa akajairwa grid system makirasi sezvaungaita kumwe kumwe.
<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>
Kusiyana kwe modal content
Iva neboka remabhatani ayo ese anokonzeresa imwe modal ine zvishoma zvakasiyana zviri mukati? Shandisa event.relatedTarget
uye HTML data-bs-*
hunhu kusiyanisa zviri mukati me modal zvichienderana nekuti bhatani ripi rakadzvanywa.
Pazasi pane demo mhenyu inoteverwa nemuenzaniso HTML neJavaScript. Kuti uwane rumwe ruzivo, verenga modal zviitiko zvinyorwa zveruzivo nezve 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
})
Toggle pakati modals
Shandura pakati pemamodal akawanda ane kumwe kungwara kwekuiswa kweiyo data-bs-target
uye data-bs-toggle
hunhu. Semuenzaniso, unogona kushandura password reset modal kubva mukati meiyo yatovhurwa sign in modal. Ndapota cherechedza kuti modals dzakawanda hadzigoni kuvhurwa panguva imwe chete-iyi nzira inongochinja pakati pemhando mbiri dzakasiyana.
<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>
Chinja animation
Musiyano $modal-fade-transform
unotara mamiriro eshanduko .modal-dialog
isati yaita modal fade-mu animation, $modal-show-transform
shanduko inotara shanduko .modal-dialog
yepanoperera modal fade-in animation.
Kana iwe uchida semuenzaniso zoom-in animation, unogona kuseta $modal-fade-transform: scale(.8)
.
Bvisa animation
Kune ma modal anongooneka pane kudzima kuti aone, bvisa .fade
kirasi kubva pane yako modal markup.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamic heights
Kana hurefu hwe modal huchichinja ichiri kuvhurika, iwe unofanirwa kufona myModal.handleUpdate()
kuti ugadzirise chinzvimbo che modal kuitira kana scrollbar ikaoneka.
Accessibility
Iva nechokwadi chekuwedzera aria-labelledby="..."
, uchireva zita re modal, ku .modal
. Pamusoro pezvo, iwe unogona kupa tsananguro yemodal dialog yako ne aria-describedby
pa .modal
. Ziva kuti haufanire kuwedzera role="dialog"
sezvo isu tatozviwedzera kuburikidza neJavaScript.
Kubatanidza mavhidhiyo eYouTube
Kuisa mavhidhiyo eYouTube mumodals kunoda yekuwedzera JavaScript isiri muBootstrap kuti imise otomatiki kutamba nezvimwe. Ona iyi inobatsira Stack Overflow post kuti uwane rumwe ruzivo.
Optional sizes
Modals ine matatu esarudzo saizi, anowanikwa kuburikidza ne modifier makirasi kuti aiswe pa .modal-dialog
. Aya saizi anopinda mune mamwe mabreakpoints kudzivirira akachinjika scrollbar pane nhete dzekutarisa.
Size | Kirasi | Modal max-width |
---|---|---|
Diki | .modal-sm |
300px |
Default | Hapana | 500px |
Zvikuru | .modal-lg |
800px |
Kuwedzera kukuru | .modal-xl |
1140px |
Yedu default modal isina modifier kirasi inoumba "yepakati" saizi modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fullscreen Modal
Imwe yakawedzera isarudzo yekuburitsa modal inovhara mushandisi yekutarisa, inowanikwa kuburikidza ne modifier makirasi anoiswa pane .modal-dialog
.
Kirasi | Kuwanikwa |
---|---|
.modal-fullscreen |
Nguva dzose |
.modal-fullscreen-sm-down |
Pazasi576px |
.modal-fullscreen-md-down |
Pazasi768px |
.modal-fullscreen-lg-down |
Pazasi992px |
.modal-fullscreen-xl-down |
Pazasi1200px |
.modal-fullscreen-xxl-down |
Pazasi1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Variables
$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
Inopindura yakazara skrini modhi inogadzirwa kuburikidza $breakpoints
nemepu uye loop mu 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);
}
}
}
}
Usage
Iyo modal plugin inoshandura yako yakavanzika yemukati paunoda, kuburikidza nedata hunhu kana JavaScript. Iyo zvakare inodarika maitiro ekusagadzika ekupurudzira uye inogadzira .modal-backdrop
kuti ipe nzvimbo yekudzvanya yekudzinga yakaratidzwa modal kana uchidzvanya kunze kwe modal.
Via data hunhu
Toggle
Shandisa modal pasina kunyora JavaScript. Gadzirisa data-bs-toggle="modal"
chinhu chekutonga, sebhatani, pamwe chete nea data-bs-target="#foo"
kana href="#foo"
kunanga imwe modhi yekushandura.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Dzinga
Kudzingwa kunogona kuwanikwa data
nehunhu huri pabhatani mukati me modal sezvakaratidzwa pazasi:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
kana pane bhatani riri kunze kwe modal uchishandisa data-bs-target
sezvaratidzwa pazasi:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Via JavaScript
Gadzira modal ine mutsara mumwechete weJavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Options
Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-
, semu data-bs-backdrop=""
.
Zita | Type | Default | Tsanangudzo |
---|---|---|---|
backdrop |
boolean kana tambo'static' |
true |
Inosanganisira modal-backdrop element. Neimwe nzira, tsanangura static kune yekumashure iyo isingavhare modal pakudzvanya. |
keyboard |
boolean | true |
Inovhara modal kana kiyi yekutiza ikadzvanywa |
focus |
boolean | true |
Inoisa tarisiro pane modal kana yatangwa. |
Nzira
Asynchronous nzira uye shanduko
Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .
Kupfuura sarudzo
Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle
Pamaoko anoshandura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.modal
kana hidden.bs.modal
chiitiko chisati chaitika).
myModal.toggle()
show
Nemaoko anovhura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa (kureva kuti shown.bs.modal
chiitiko chisati chaitika).
myModal.show()
Zvakare, iwe unogona kupfuudza chinhu cheDOM senharo inogona kugamuchirwa mune modal zviitiko (senzvimbo relatedTarget
).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
hide
Anozvivanza modal. Inodzokera kune akafona modal isati yanyatsovanzwa (kureva kuti hidden.bs.modal
chiitiko chisati chaitika).
myModal.hide()
handleUpdate
Rongedza nemaoko chinzvimbo che modal kana kureba kwe modal ikachinja payakavhurika (kureva kuti kana scrollbar ikabuda).
myModal.handleUpdate()
kurasa
Inoparadza modal yechinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)
myModal.dispose()
getInstance
Static nzira iyo inokutendera iwe kuti uwane iyo modal muenzaniso yakabatana neiyo DOM chinhu
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Static nzira iyo inokutendera iwe kuti uwane iyo modal muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Zviitiko
Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro. Zvese zviitiko zve modal zvinodzingwa pa modal pachayo (kureva pa <div class="modal">
).
Chiitiko mhando | Tsanangudzo |
---|---|
show.bs.modal |
Ichi chiitiko chinopisa nekukasira kana show nzira yemuenzaniso inodanwa. Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu relatedTarget chechiitiko. |
shown.bs.modal |
Ichi chiitiko chinodzingwa kana modal yaitwa kuti ionekwe kumushandisi (inomirira kuti CSS shanduko ipedze). Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu relatedTarget chechiitiko. |
hide.bs.modal |
Ichi chiitiko chinodzingwa nekukasira kana iyo hide muenzaniso nzira yadaidzwa. |
hidden.bs.modal |
Ichi chiitiko chinodzingwa kana modal yapedza kuvanzwa kubva kumushandisi (inomirira kuti CSS shanduko ipedze). |
hidePrevented.bs.modal |
Chiitiko ichi chinodzingwa kana modal yaratidzwa, kumashure kwayo static uye kudzvanya kunze kwe modal kana kutiza kiyi yekutsikirira inoitwa neiyo keyboard sarudzo kana data-bs-keyboard kusetwa ku false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})