Modal we de sho aw fɔ du am
Yuz Bootstrap in JavaSkript modal plɔgin fɔ ad dayalɔg dɛn to yu sayt fɔ laytbɔks, yuz notis, ɔ kɔmplit kɔstɔm kɔntinyu.
Aw i de wok
Bifo yu bigin wit Bootstrap in modal kɔmpɔnɛnt, mek shɔ se yu rid wetin de dɔŋ ya bikɔs wi mɛnyu opshɔn dɛn dɔn chenj i nɔ tu te yet.
- Dɛn bil di mɔdal dɛn wit HTML, CSS, ɛn JavaSkript. Dɛn de posishun oba ɔl ɔda tin dɛn na di dɔkyumɛnt ɛn pul skrol frɔm di
<body>
so dat modal kɔntinyu skrol insted. - We yu klik di modal “bakdrop” i go lɔk di modal ɔtomɛtik wan.
- Bootstrap de sɔpɔt wan modal winda nɔmɔ wan tɛm. Nested modals nɔ de sɔpɔt as wi biliv se dɛn na po yuz ɛkspiriɛns.
- Modals use
position: fixed
, we kin sɔm tɛm dɛn kin bi smɔl patikyula bɔt in rɛnda. Ɛnitɛm we i pɔsibul, put yu modal HTML na wan tɔp-lɛvel pozishɔn fɔ avɔyd pɔtnɛshɛl intafɛreshɔn frɔm ɔda ɛlimɛnt dɛn. Yu go mɔs rɔn insay prɔblɛm dɛn we yu de nest wan.modal
insay ɔda fiks ɛlimɛnt. - Wans bak, bikɔs ɔf
position: fixed
, sɔm kɔvɛt dɛn de wit yuz modal dɛn na mobayl divays dɛn. Si wi brawza sɔpɔt dɔkyumɛnt dɛn fɔ di ditel dɛn. - Bikɔs ɔf aw HTML5 de difayn in sɛmantiks, di
autofocus
HTML atribyut nɔ gɛt ɛni ifɛkt na Bootstrap modals. Fɔ mek yu ebul fɔ du di sem tin, yuz sɔm kɔstɔm JavaSkript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
Kɔntinyu fɔ rid fɔ di demo ɛn aw fɔ yuz gaydlayn dɛn.
Ɛgzampul dɛn
Modal komponent dɛn
Dis dɔŋ ya na wan statik modal ɛgzampul (we min in position
ɛn display
dɛn dɔn ɔvarayd). Insay de, di modal hεda, di modal bכdi (we nid fכ padding
), εn di modal fut (opshכnal). Wi de aks yu fɔ put modal hεda wit dismis akshɔn ɛnitɛm we i pɔsibul, ɔ gi ɔda klia dismis akshɔn.
<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>
Layf dɛmo
Toggle wan wok modal demo bay we yu klik di bɔtin we de dɔŋ. I go slayv dɔŋ ɛn fade insay frɔm di ɔp pat na di pej.
<!-- 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>
Statik bakgrɔn
We dɛn sɛt bakdrop to statik, di modal nɔ go lɔk we yu klik ausayd am. Klik di bɔtin we de dɔŋ fɔ tray am.
<!-- 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>
Skrol lɔng kɔntinyu
We di modal dɛn kin tu lɔng fɔ di pɔsin in viupɔt ɔ divays, dɛn kin skrol indipɛndɛnt frɔm di pej sɛf. Tray di demo we de dɔŋ fɔ si wetin wi min.
Yu kin mek bak wan modal we yu kin skrol we de alaw fɔ skrol di modal bɔdi bay we yu ad .modal-dialog-scrollable
to .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikal wan we de na di sɛnt
Add .modal-dialog-centered
to .modal-dialog
fɔ vertikal sɛnt di 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>
Tultips ɛn popovers
Tultips ɛn popovers kin put insay modals as nid de. We dɛn lɔk modal dɛn, ɛni tultip ɛn popovers insay dɛnsɛf kin ɔtomɛtik dismis.
<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>
We yu de yuz di grid
Yutilayz di Bootstrap grid sistem insay wan modal bay we yu de nest .container-fluid
insay di .modal-body
. Dɔn, yuz di nɔmal grid sistɛm klas dɛn lɛk aw yu go du ɛni ɔda say.
<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>
Difrɛn difrɛn modal kɔntinyu
Yu gɛt wan bɔnch bɔtin dɛn we ɔl de trig di sem modal wit smɔl difrɛn kɔntinyu? Yuz event.relatedTarget
ɛn HTML data-bs-*
atribyut dɛn fɔ chenj di tin dɛn we de insay di modal dipen pan us bɔtin dɛn klik.
Dis dɔŋ ya na layv dɛmo we de fala wit ɛgzampul HTML ɛn JavaSkript. Fɔ no mɔ, rid di modal events docs fɔ di ditel dɛn bɔt 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 bitwin di modals
Toggle bitwin multiple modals wit sɔm kleva plesmɛnt fɔ di data-bs-target
ɛn data-bs-toggle
atribyut dɛn. Fɔ ɛgzampul, yu kin chenj wan paswɔd riset modal frɔm insay wan sayn in modal we dɔn ɔlrɛdi opin. Duya notis se bɔku mɔdal dɛn nɔ go ebul fɔ opin di sem tɛm —dis we de jɔs chenj bitwin tu difrɛn modal dɛn.
<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>
Chenj animashɔn
Di $modal-fade-transform
vεriεbul de ditarmin di transfכm stet כf .modal-dialog
bifo di modal fεd-in animashכn, di $modal-show-transform
vεriεbul de ditarmin di transfכm כf .modal-dialog
na di εnd כf di modal fεd-in animashכn.
If yu want fɔ ɛgzampul wan zoom-in animashɔn, yu kin sɛt $modal-fade-transform: scale(.8)
.
Rimov di animashɔn
Fɔ modal dɛn we jɔs de apia pas fɔ fade in fɔ si, pul di .fade
klas frɔm yu modal mak.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamik ayt dɛn
If di ayt fɔ wan modal chenj we i opin, yu fɔ kɔl myModal.handleUpdate()
fɔ ajɔst di modal in pozishɔn bak if wan skrolba apia.
Di we aw pɔsin kin ebul fɔ go de
Mek shɔ se yu ad aria-labelledby="..."
, we de rɛfrɛns di modal taytul, to .modal
. Apat frɔm dat, yu kin gi diskripshɔn fɔ yu modal dayalɔg wit aria-describedby
on .modal
. Notis se yu nɔ nid fɔ ad role="dialog"
bikɔs wi dɔn ɔlrɛdi ad am bay JavaSkript.
Fɔ put di fim dɛn na Yutub fɔ put insay
Fɔ ɛmbas Yutub fim dɛn na modal dɛn nid fɔ gɛt ɔda JavaSkript we nɔ de na Bootstrap fɔ mek i stɔp fɔ ple ɔtomɛtik wan ɛn ɔda tin dɛn. Si dis ɛp Stack Overflow post fɔ mɔ infɔmeshɔn.
Saiz dɛn we yu kin pik
Modal dɛn gɛt tri opshɔnal saiz dɛn, we de bay modifya klas dɛn fɔ put pan wan .modal-dialog
. Dɛn saiz dɛn ya kin kik insay sɔm brek pɔynt dɛn fɔ avɔyd ɔrizɔntal skrol bar dɛn na smɔl smɔl viupɔt dɛn.
Sayz | Klas | Modal maks-width fɔ di wan dɛn |
---|---|---|
Smɔl | .modal-sm |
300px |
Balans | Nɔn | 500px |
Big | .modal-lg |
800px |
Ekstra big wan | .modal-xl |
1140px |
Wi difɔlt modal we nɔ gɛt modifya klas de kɔnstityut di “midul” saiz modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fulskrin Modal
Wan ɔda ɔvarayd na di opshɔn fɔ pop ɔp wan modal we de kɔba di yuza viupɔt, we de bay modifya klas dɛn we dɛn put pan wan .modal-dialog
.
Klas | Di tin dɛn we de de |
---|---|
.modal-fullscreen |
Ɔltɛm |
.modal-fullscreen-sm-down |
Dɔŋ576px |
.modal-fullscreen-md-down |
Dɔŋ768px |
.modal-fullscreen-lg-down |
Dɔŋ992px |
.modal-fullscreen-xl-down |
Dɔŋ1200px |
.modal-fullscreen-xxl-down |
Dɔŋ1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass we bin de
Di tin dɛn we kin chenj
$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);
Tay
Rispɔnsiv fulskrin modals dɛn de jenarayz via di $breakpoints
map ɛn wan lɔp insay 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);
}
}
}
}
Aw fɔ yuz am
Di modal plɔgin de chenj yu kɔntinyu we yu ayd we yu aks fɔ am, bay we yu yuz data atribyut ɔ JavaSkript. I de ɔvalayz bak difɔlt skrolin bihayvya ɛn jenarayz a .modal-backdrop
fɔ gi wan klik eria fɔ dismis di modal dɛn we dɛn sho we yu klik ausayd di modal.
Via data atribyut dɛn
Aktiv wan modal we nɔ rayt JavaSkript. Sɛt data-bs-toggle="modal"
pan wan kɔntrol ɛlimɛnt, lɛk wan bɔtin, wit wan data-bs-target="#foo"
ɔ href="#foo"
fɔ tɔch wan patikyula modal fɔ tɔgl.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Yu kin yuz JavaSkript fɔ yuz am
Krio wan modal wit wan layn fɔ JavaSkript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Di tin dɛn we yu kin pik fɔ du
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-bs-
, lɛk insay data-bs-backdrop=""
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
backdrop |
boolean ɔ di string'static' |
true |
Inklud wan modal-bakdrop ɛlimɛnt. Ɔda we de fɔ du dat, spɛsifa static fɔ wan bakdrop we nɔ de lɔk di modal we yu klik. |
keyboard |
boolean we dɛn kɔl | true |
Klos di modal we dɛn prɛs di ɛspɛk ki |
focus |
boolean we dɛn kɔl | true |
Put di fos pan di modal we dɛn initialize. |
Di we aw dɛn de du am
Asynchronous mεtכd dεm εn transishכn dεm
Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .
Di opshɔn dɛn fɔ pas
Aktiv yu kɔntinyu as modal. Aksept wan opshɔnal opshɔn dɛn object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
fɔ chenj di we aw dɛn de
Manually de toggle wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili sho ɔ ayd (dat na bifo di shown.bs.modal
ɔ hidden.bs.modal
ivin apin).
myModal.toggle()
sho
Manually de opin wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili sho (dat na bifo di shown.bs.modal
ivin apin).
myModal.show()
Dɔn bak, yu kin pas wan DOM ɛlimɛnt as argumɛnt we dɛn kin gɛt na di modal ivin dɛn (as di relatedTarget
prɔpati).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ayd
Manually de ayd wan modal. Ritɔn to di pɔsin we kɔl bifo di modal dɔn rili ayd (dat na bifo di hidden.bs.modal
ivin apin).
myModal.hide()
handleUpdate fɔ du sɔntin
Riadjɔst di modal in pozishɔn wit yu an if di ayt fɔ wan modal chenj we i opin (dat na if wan skrolba apia).
myModal.handleUpdate()
fɔ trowe am
Destroy wan element in modal. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
myModal.dispose()
getInstans fɔ di wan dɛn we de
Statik mɛtɔd we de alaw yu fɔ gɛt di modal instans we gɛt fɔ du wit wan DOM ɛlimɛnt
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getƆKriɛtInstans
Statik we de alaw yu fɔ gɛt di modal instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Di tin dɛn we kin apin
Bootstrap in modal klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay modal funkshɔnaliti. Ɔl di modal ivin dɛn de faya na di modal sɛf (dat na na di <div class="modal">
).
Di kayn tin we apin | Tɔk bɔt |
---|---|
show.bs.modal |
Dis ivent de faya wantɛm wantɛm we dɛn kɔl di show instans mɛtɔd. If na klik, di ɛlimɛnt we dɛn klik de as di relatedTarget prɔpati fɔ di ivin. |
shown.bs.modal |
Dis ivent de faya we di modal dɔn mek di pɔsin we de yuz am si (go wet fɔ mek di CSS transishɔn dɛn dɔn). If na klik, di ɛlimɛnt we dɛn klik de as di relatedTarget prɔpati fɔ di ivin. |
hide.bs.modal |
Dis ivent de faya wantɛm wantɛm we hide dɛn dɔn kɔl di instans mɛtɔd. |
hidden.bs.modal |
Dis ivent de faya we di modal dɔn dɔn fɔ ayd frɔm di yuza (go wet fɔ CSS transishɔn dɛn fɔ dɔn). |
hidePrevented.bs.modal |
Dis ivent de faya we di modal sho, in bakdrop de static ɛn wan klik ausayd di modal ɔ wan ɛspɛk ki prɛs de du wit di kibɔd opshɔn ɔ data-bs-keyboard sɛt to false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})