Modal
Salelá plugin modal ya JavaScript ya Bootstrap mpo na kobakisa ba dialogues na site na yo mpo na ba lightbox, mayebisi ya mosaleli, to makambo oyo obongisi mpenza.
Ndenge oyo esalaka
Yambo ya kobanda na composant modal ya Bootstrap, sala makasi otanga oyo elandi lokola ba options na biso ya menu ebongwani kala mingi te.
- Ba modales etongami na HTML, CSS, mpe JavaScript. Bazali positionné likolo ya nionso mosusu na mokanda mpe kolongola défilement na
<body>
mpo contenus modal défilement na esika. - Kofina na “fon d’écran” modal ekokanga automatiquement modal.
- Bootstrap esimbaka kaka fenêtre modale moko na mbala moko. Ba modals encastrés esungami te lokola tondimi ete ezali ba expériences ya ba usagers ya mabe.
- Modals use
position: fixed
, oyo ekoki ntango mosusu kozala mwa particulier na oyo etali rendu na yango. Ntango nyonso oyo likoki ezali, tyá HTML na yo ya modɛlɛ na esika ya nivo ya likoló mpo na koboya ete biloko mosusu ekɔta na makambo mosusu. Okozala mbala mosusu kokutana na makambo ntango ozali kosala nesting a na.modal
kati ya élément mosusu fixe. - Encore une fois, en raison ya
position: fixed
, ezali na mua ba caveats na kosalela ba modals na ba appareils mobiles. Tala ba docs na biso ya soutien ya navigateur pona ba détails. - Na tina ya ndenge HTML5 elimbolaka sémantique na yango, attribut
autofocus
HTML ezali na effet moko te na ba modal ya Bootstrap. Mpo na kozwa eloko moko, salelá mwa JavaScript oyo olingi:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
requête ya média. Tala
eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Koba kotanga mpo na ba démos mpe malako ya kosalela.
Bandakisa
Ba composants ya modale
En bas ezali exemple modal statiqueposition
(elingi koloba ya yango mpe display
basili ko superposer). Ezali na kati ya motó ya modale, nzoto ya modale (esengeli mpo na padding
), mpe motó ya nse ya modal (ekoki kozala na bolingi). Tosengi ete otia ba têtes modales na ba actions ya démission soki likoki ezali, to opesa action mosusu ya démission ya polele.
<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>
Démonstration en direct
Toggle démonstration modal ya mosala na ko cliquer bouton oyo ezali awa na se. Ekokita mpe ekosila na kati longwa na likoló ya lokasa.
<!-- 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>
Fond d'écran statique
Tango fond d'écran etie na statique, modal ekokangama te tango ozali ko cliquer libanda na yango. Finá na butɔ oyo ezali awa na nse mpo na komeka yango.
<!-- 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>
Kosala défilement ya makambo milai
Tango ba modal ekomi milayi mingi pona viewport to appareil ya mosaleli, ezo défiler indépendamment ya page yango moko. Meka démonstration oyo ezali awa na se po omona nini tolingi koloba.
Okoki mpe kosala modal oyo ekoki ko défiler oyo epesaka nzela ya kosala défilement ya nzoto ya modal na kobakisa .modal-dialog-scrollable
na .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Ezali na katikati ya verticale
Bakisa .modal-dialog-centered
na mpo na .modal-dialog
ko centrer verticalement 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>
Ba toli ya bisaleli mpe ba popovers
Ba toli ya bisaleli mpe ba popovers ekoki kotiama na kati ya ba modals soki esengeli. Tango ba modal ekangami, ba totips nionso ya ba outils na ba popovers na kati pe ezo rejeter automatiquement.
<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>
Kosalela grille
Salelá système ya grille ya Bootstrap na kati ya modal moko na kosala zumbu na .container-fluid
kati ya .modal-body
. Na sima, salela ba classes ya système ya grille normal ndenge okosala esika mosusu nionso.
<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>
Contenu modal oyo ekeseni
Ozali na liboke ya ba boutons oyo nionso e déclencher modal moko na ba contenus un peu différent? Salelá event.relatedTarget
mpe ba attributs HTMLdata-bs-*
mpo na kobongola makambo oyo ezali na kati ya modal engebene bouton nini obɛtaki.
Awa na se ezali démonstration en direct elandi na exemple HTML na JavaScript. Mpo na koyeba makambo mingi, tanga ba docs ya makambo ya modal mpo na koyeba makambo mingi na 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 kati na ba modal
Toggle entre ba modal ebele na mwa placement ya mayele ya ba data-bs-target
attributs data-bs-toggle
. Ndakisa, okoki kobongola modal ya réinitialisation ya mot de passe uta na kati ya signe oyo esi efungwami na modal. Svp yeba ba modal ebele ekoki kofungwama na mbala moko te —méthode oyo ezo toggle kaka entre ba modal mibale ekeseni.
<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>
Bobongola animation
Variable $modal-fade-transform
e déterminaka état ya transformation ya .modal-dialog
avant animation ya fade-in modal, $modal-show-transform
variable e déterminaka transformation ya .modal-dialog
na suka ya animation ya fade-in modal.
Soki olingi ndakisa animation ya zoom-in, okoki kotiya $modal-fade-transform: scale(.8)
.
Longola animation
Mpo na ba modal oyo emonanaka kaka na esika ya kosila mpo na kotala, longola .fade
kelasi na bilembo na yo ya modal.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Ba hauteurs dynamiques
Soki bosanda ya modal ebongwanaka ntango ezali polele, osengeli kobenga myModal.handleUpdate()
mpo na kobongisa lisusu esika ya modal na likambo oyo barre de défilement ebimi.
Kozala na makoki ya kozwa yango
Kobosana te kobakisa aria-labelledby="..."
, kosala référence na titre modal, na .modal
. En plus, okoki kopesa description ya dialogue modal na yo na aria-describedby
on .modal
. Yeba que oza na besoin ya kobakisa role="dialog"
te puisque tobakisi yango déjà via JavaScript.
Kokɔtisa ba vidéos ya YouTube
Ko intégrer ba vidéos ya YouTube na ba modals esengaka JavaScript ya kobakisa te na Bootstrap mpo na kopekisa automatiquement lecture mpe mingi mosusu. Tala post oyo ya Stack Overflow ya lisungi mpo na koyeba makambo mosusu.
Ba taille oyo okoki kopona
Ba modales ezali na ba taille misato ya option, oyo ezali na nzela ya ba classes ya modificateur oyo esengeli kotiama na .modal-dialog
. Ba taille oyo ezo kick na ba points d'écart mosusu pona ko éviter ba barres de défilement horizontale na ba portes de vue ya mike.
Bonene | Kelasi | Modal max-largeur ya kosala |
---|---|---|
Moke | .modal-sm |
300px |
Mbeba | Moko te | 500px |
Monene | .modal-lg |
800px |
Extra ya monene | .modal-xl |
1140px |
Modal na biso ya par défaut sans modificateur classe e constituaka modal ya taille « moyenne ».
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal ya écran mobimba
Override mosusu ezali option ya ko pop up modal oyo ezo couvrir viewport ya usager, disponible via ba classes ya modificateur oyo etie na .modal-dialog
.
Kelasi | Disponibilité |
---|---|
.modal-fullscreen |
Ntango nyonso |
.modal-fullscreen-sm-down |
Na nse576px |
.modal-fullscreen-md-down |
Na nse768px |
.modal-fullscreen-lg-down |
Na nse992px |
.modal-fullscreen-xl-down |
Na nse1200px |
.modal-fullscreen-xxl-down |
Na nse1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass oyo azali
Ba variables oyo ezali
$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);
Boucle
Ba modals ya écran mobimba oyo ezo répondre ezo generer via $breakpoints
carte na boucle na 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);
}
}
}
}
Kosalela yango
Plugin modal ebalusaka ba contenus na yo oyo ebombami na demande, na nzela ya ba attributs ya ba données to JavaScript. Ezali mpe koboya comportement ya défilement par défaut mpe ebimisaka a .modal-backdrop
mpo na kopesa esika ya kofina mpo na koboya ba modal oyo elakisami ntango ozali kofina libanda ya modal.
Na nzela ya ba attributs ya ba données
Activer modal sans kokoma JavaScript. Set data-bs-toggle="modal"
na élément ya contrôleur, lokola bouton, elongo na data-bs-target="#foo"
to href="#foo"
pona ko cibler modal spécifique pona ko toggler.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Na nzela ya JavaScript
Bosala modal na ligne moko ya JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Makambo oyo okoki kopona
Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-bs-
, lokola na data-bs-backdrop=""
.
Nkombo | Lolenge | Mbeba | Ndimbola |
---|---|---|---|
backdrop |
boolean to na molongo'static' |
true |
Ezali na élément moko ya modal-backdrop. Na lolenge mosusu, lakisa static mpo na fond d'écran oyo ekangaka te modal na clic. |
keyboard |
boolean | true |
Ekangaka modal tango ba fingi touche ya escape |
focus |
boolean | true |
Etie focus na modal tango e initialiser. |
Ba méthodes ya kosala
Ba méthodes asynchrones na ba transitions
Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .
Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .
Ba options ya koleka
Active contenus na yo lokola modal. Andimi ba options moko ya option object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
kobongola makambo
Manuellement ebalukaka modal moko. Ezongi na mobengi yambo modal elakisama to ebombama mpenza (elingi koloba liboso ete likambo shown.bs.modal
to hidden.bs.modal
esalema).
myModal.toggle()
kolakisa
Manuellement efungolaka modal moko. Ezongi na mobengi avant modal elakisama vraiment (c.a.d. avant shown.bs.modal
événement esalama).
myModal.show()
Lisusu, okoki koleka élément DOM lokola argument oyo ekoki kozuama na ba événements modaux (lokola relatedTarget
propriété).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
kobombana
Manuellement abombaka modal moko. Ezongisaka na mobengi liboso ete modal ebombama mpenza (elingi koloba liboso ete hidden.bs.modal
likambo esalema).
myModal.hide()
handleMikolo oyo
Réajuster manuellement position ya modal soki hauteur ya modal ebongwanaka tango ezali polele (c.a.d. na cas barre de défilement ebimi).
myModal.handleUpdate()
kobwaka yango
Ebebisaka modal ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM)
myModal.dispose()
kozwaInstance
Méthode statique oyo e permettre yo ozua instance modal associée na élément DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
kozwaToKosalaInstance
Méthode statique oyo e permettre yo ozua instance modal associée na élément DOM, to osala ya sika au cas où ebandaki ko initialiser te
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Makambo oyo esalemaki
Classe modal ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité modal. Ba événements modaux nionso ezo betama na modal yango moko (c.a.d. na <div class="modal">
).
Lolenge ya likambo | Ndimbola |
---|---|
show.bs.modal |
Evenement oyo ezo beta mbala moko tango show méthode ya instance ebengami. Soki euti na kofina, eloko oyo obɛti ezali lokola relatedTarget eloko ya likambo. |
shown.bs.modal |
Evenement oyo ezo beta tango modal esalemi visible na mosaleli (ekozela ba transitions ya CSS esila). Soki euti na kofina, eloko oyo obɛti ezali lokola relatedTarget eloko ya likambo. |
hide.bs.modal |
Evenement oyo ezo beta mbala moko tango hide méthode ya instance ebengami. |
hidden.bs.modal |
Evenement oyo ezo beta tango modal esili kobombama na mosaleli (ekozela ba transitions ya CSS esila). |
hidePrevented.bs.modal |
Evenement oyo ezo beta tango modal elakisami, fond d'écran na yango ezali static mpe clic libanda ya modal to kofina touche ya kokima esalemi na option ya clavier to data-bs-keyboard etiamaki na false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})