Modal
Siv Bootstrap's JavaScript modal plugin ntxiv dialogs rau koj qhov chaw rau lightboxes, neeg siv cov ntawv ceeb toom, lossis cov ntsiab lus kev cai tag nrho.
Nws ua haujlwm li cas
Ua ntej pib nrog Bootstrap's modal tivthaiv, nco ntsoov nyeem cov hauv qab no raws li peb cov kev xaiv zaub mov tsis ntev los no tau hloov.
- Modals yog tsim nrog HTML, CSS, thiab JavaScript. Lawv nyob nraum positioned tshaj txhua yam nyob rau hauv cov ntaub ntawv thiab tshem tawm scroll los ntawm lub
<body>
thiaj li hais tias modal cov ntsiab lus scrolls hloov. - Nyem rau ntawm lub modal "backdrop" yuav cia li kaw lub modal.
- Bootstrap tsuas txhawb ib lub qhov rais modal ib zaug. Nested modals tsis txaus siab vim peb ntseeg tias lawv yog cov neeg siv tsis zoo.
- Modals siv
position: fixed
, uas qee zaum tuaj yeem yog qhov tshwj xeeb ntawm nws qhov kev ua haujlwm. Thaum twg ua tau, tso koj cov HTML modal rau hauv qhov chaw sab saum toj kom tsis txhob muaj kev cuam tshuam los ntawm lwm cov ntsiab lus. Koj yuav muaj peev xwm khiav mus rau hauv cov teeb meem thaum nesting ib.modal
nyob rau hauv lwm yam khoom ruaj. - Ib zaug ntxiv, vim
position: fixed
, muaj qee qhov caveats nrog kev siv modals ntawm mobile pab kiag li lawm. Saib peb cov ntaub ntawv txhawb nqa browser kom paub meej. - Vim li cas HTML5 txhais nws cov semantics, HTML tus cwj pwm tsis
autofocus
muaj txiaj ntsig hauv Bootstrap modals. Txhawm rau ua tiav cov txiaj ntsig zoo ib yam, siv qee qhov kev cai JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
lus nug xov xwm. Saib qhov
txo qis ntawm peb cov ntaub ntawv nkag mus tau .
Khaws nyeem rau demos thiab cov lus qhia siv.
Piv txwv
Modal Cheebtsam
Hauv qab no yog ib qho piv txwv zoo li qub (lub ntsiab lus nws position
thiab display
tau dhau los). Xws li yog lub taub hau modal, modal lub cev (yuav tsum tau rau padding
), thiab modal footer (yeem). Peb thov kom koj suav nrog cov ntsiab lus ntawm kev tso tawm thaum twg los tau, lossis muab lwm qhov kev tso tawm kom pom tseeb.
<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>
Nyob demo
Toggle ib tug ua hauj lwm modal demo los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.
<!-- 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
Thaum backdrop yog teem rau zoo li qub, lub modal yuav tsis kaw thaum nias sab nraum nws. Nyem lub pob hauv qab no sim nws.
<!-- 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 cov ntsiab lus ntev
Thaum modals ntev dhau los rau tus neeg siv qhov chaw saib lossis ntaus ntawv, lawv scroll ywj siab ntawm nplooj ntawv nws tus kheej. Sim cov demo hauv qab no kom pom tias peb txhais li cas.
Koj tuaj yeem tsim tau ib qho scrollable modal uas tso cai rau scroll lub modal lub cev los ntawm kev ntxiv .modal-dialog-scrollable
rau .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertical centered
Ntxiv .modal-dialog-centered
mus .modal-dialog
rau vertically center lub 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>
Cov lus qhia thiab popovers
Cov lus qhia thiab popovers tuaj yeem muab tso rau hauv modals raws li xav tau. Thaum cov modals raug kaw, txhua yam lus qhia thiab cov popovers nyob rau hauv kuj raug tso tseg.
<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>
Siv daim phiaj
Siv lub Bootstrap kab sib chaws nyob rau hauv ib tug modal los ntawm nesting .container-fluid
nyob rau hauv lub .modal-body
. Tom qab ntawd, siv cov chav kawm kab ke ib txwm ua raws li koj xav tau nyob txhua qhov chaw.
<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>
Varying modal cov ntsiab lus
Muaj ib pawg ntawm cov nyees khawm uas txhua tus ua rau tib lub modal nrog cov ntsiab lus sib txawv me ntsis? Siv event.relatedTarget
thiab HTML data-bs-*
tus cwj pwm kom sib txawv ntawm cov ntsiab lus ntawm lub modal nyob ntawm seb lub pob twg raug nias.
Hauv qab no yog qhov ua yeeb yaj kiab nyob ua raws li piv txwv HTML thiab JavaScript. Yog xav paub ntxiv, nyeem cov txheej xwm modal docs kom paub meej txog 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 ntawm modals
Toggle ntawm ntau modals nrog qee qhov kev tso kawm ntse ntawm cov khoom data-bs-target
thiab data-bs-toggle
cov cwj pwm. Piv txwv li, koj tuaj yeem toggle tus password reset modal los ntawm hauv qhov qhib kos npe rau hauv modal. Thov nco ntsoov ntau modals tsis tuaj yeem qhib tib lub sijhawm - txoj kev no tsuas yog toggles ntawm ob qhov sib txawv modals.
<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>
Hloov cov animation
Qhov $modal-fade-transform
sib txawv txiav txim siab hloov lub xeev ntawm .modal-dialog
ua ntej modal ploj-hauv animation, qhov $modal-show-transform
sib txawv txiav txim siab hloov pauv ntawm .modal-dialog
qhov kawg ntawm modal fade-in animation.
Yog tias koj xav tau piv txwv zoom-hauv animation, koj tuaj yeem teeb tsa $modal-fade-transform: scale(.8)
.
Tshem cov animation
Rau cov qauv uas tsuas yog tshwm sim ntau dua li ploj mus saib, tshem tawm cov .fade
chav kawm los ntawm koj cov ntawv cim modal.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamic qhov siab
Yog hais tias qhov siab ntawm ib qho kev hloov pauv thaum nws qhib, koj yuav tsum hu myModal.handleUpdate()
mus kho lub modal txoj hauj lwm nyob rau hauv cov ntaub ntawv ib tug scrollbar tshwm.
Kev siv tau
Nco ntsoov ntxiv aria-labelledby="..."
, xa mus rau lub npe modal, rau .modal
. Tsis tas li ntawd, koj tuaj yeem muab cov lus piav qhia ntawm koj lub modal dialog nrog aria-describedby
rau ntawm .modal
. Nco ntsoov tias koj tsis tas yuav ntxiv role="dialog"
vim peb twb ntxiv nws ntawm JavaScript.
Embedding YouTube yeeb yaj duab
Embedding YouTube yeeb yaj duab nyob rau hauv modals yuav tsum tau ntxiv JavaScript tsis nyob rau hauv Bootstrap kom cia li nres playback thiab ntau dua. Saib qhov pab tau Stack Overflow ncej kom paub ntau ntxiv.
Xaiv qhov ntau thiab tsawg
Modals muaj peb qhov ntau thiab tsawg, muaj nyob ntawm cov chav kawm hloov kho kom muab tso rau ntawm ib qho .modal-dialog
. Cov qhov loj me no ncaws tawm ntawm qee qhov chaw nres tsheb kom tsis txhob muaj kab rov tav scrollbars ntawm qhov chaw nqaim.
Loj | Chav kawm | Modal max-dav |
---|---|---|
Me me | .modal-sm |
300px |
Default | Tsis muaj | 500px |
Loj | .modal-lg |
800px |
Ntxiv loj | .modal-xl |
1140px |
Peb default modal yam tsis muaj kev hloov kho chav kawm yog qhov "nruab nrab" modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fullscreen Modal
Lwm qhov override yog qhov kev xaiv pop up modal uas npog cov neeg siv qhov chaw saib, muaj nyob ntawm cov chav kawm hloov kho uas tau muab tso rau hauv .modal-dialog
.
Chav kawm | Muaj |
---|---|
.modal-fullscreen |
Ib txwm |
.modal-fullscreen-sm-down |
Hauv qab no576px |
.modal-fullscreen-md-down |
Hauv qab no768px |
.modal-fullscreen-lg-down |
Hauv qab no992px |
.modal-fullscreen-xl-down |
Hauv qab no1200px |
.modal-fullscreen-xxl-down |
Hauv qab no1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Hloov pauv
$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
Teb puv npo modals yog tsim los ntawm $breakpoints
daim ntawv qhia thiab lub voj hauv 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);
}
}
}
}
Kev siv
Lub modal plugin toggles koj zais cov ntsiab lus ntawm kev thov, ntawm cov ntaub ntawv cwj pwm lossis JavaScript. Nws tseem overrides default scrolling cwj pwm thiab tsim ib tug .modal-backdrop
los muab ib tug nias cheeb tsam rau dismissing qhia modals thaum txhaj sab nraum lub modal.
Los ntawm cov ntaub ntawv attributes
Qhib lub modal yam tsis tau sau JavaScript. Teem data-bs-toggle="modal"
rau ntawm tus tswj lub caij, zoo li lub pob, nrog rau ib data-bs-target="#foo"
lossis href="#foo"
rau lub hom phiaj rau ib qho kev hloov pauv.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Ntawm JavaScript
Tsim ib qho modal nrog ib kab ntawm JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Kev xaiv
Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-
, xws li hauv data-bs-backdrop=""
.
Lub npe | Hom | Default | Kev piav qhia |
---|---|---|---|
backdrop |
boolean los yog txoj hlua'static' |
true |
Xws li ib qho modal-backdrop element. Xwb, qhia meej static rau ib qho backdrop uas tsis kaw lub modal ntawm nias. |
keyboard |
boolean | true |
Kaw lub modal thaum khiav qhov tseem ceeb yog nias |
focus |
boolean | true |
Muab qhov tsom mus rau lub modal thaum pib. |
Cov txheej txheem
Asynchronous txoj kev thiab kev hloov
Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .
Hla kev xaiv
Activates koj cov ntsiab lus raws li ib tug modal. Txais ib qho kev xaiv xaiv object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle
Manually toggles ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim los yog zais (piv txwv li ua ntej qhov shown.bs.modal
kev hidden.bs.modal
tshwm sim tshwm sim).
myModal.toggle()
ua yeeb yam
Manually qhib lub modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.modal
kev tshwm sim tshwm sim).
myModal.show()
Tsis tas li ntawd, koj tuaj yeem dhau lub ntsiab lus DOM raws li kev sib cav uas tuaj yeem tau txais hauv cov xwm txheej modal (raws li cov relatedTarget
cuab yeej).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
zais
Manually hides ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.modal
xwm txheej tshwm sim).
myModal.hide()
handleUpdate
Manually readjust lub modal txoj hauj lwm yog hais tias qhov siab ntawm ib tug modal hloov thaum nws qhib (piv txwv li nyob rau hauv cov ntaub ntawv ib tug scrollbar tshwm).
myModal.handleUpdate()
pov tseg
Destroys an element’s modal. (Removes stored data on the DOM element)
myModal.dispose()
getInstance
Static method which allows you to get the modal instance associated with a DOM element
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Events
Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">
).
Event type | Description |
---|---|
show.bs.modal |
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
shown.bs.modal |
Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). Yog hais tias tshwm sim los ntawm ib tug nias, lub clicked caij yog muaj raws li cov relatedTarget cuab yeej ntawm qhov kev tshwm sim. |
hide.bs.modal |
Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum hide hu ua piv txwv txoj kev. |
hidden.bs.modal |
Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). |
hidePrevented.bs.modal |
Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tshwm sim, nws cov backdrop yog static thiab ib tug nias sab nraum lub modal los yog ib tug khiav ceev xovxwm yog ua nrog cov keyboard xaiv los yog data-bs-keyboard teem rau false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})