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. Soki likoki ezali, tia HTML na yo ya modal na esika ya nivo ya likolo mpo na koboya bopanzani oyo ekoki kobima na biloko mosusu. Okozala mbala mosusu kokutana na makambo ntango ozali kosala nesting a na .modalkati 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 autofocusHTML ezali na effet moko te na ba modal ya Bootstrap. Mpo na kozwa effet moko, salelá mwa JavaScript oyo obongisi:
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 displaybasili 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.
Titre ya modale
Texte ya nzoto modal ekendaka awa.
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.
Titre ya modale
Woohoo, ozali kotanga texte oyo na modal!
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.
Titre ya modale
Nako kanga te soki o cliquer libanda na ngai. Koluka kutu te kofina touche escape.
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.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Okoki mpe kosala modal oyo ekoki ko défiler oyo epesaka nzela ya kosala défilement ya nzoto ya modal na kobakisa .modal-dialog-scrollablena .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Ezali na katikati ya verticale
Bakisa .modal-dialog-centeredna mpo na .modal-dialogko centrer verticalement modal.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
Salelá système ya grille ya Bootstrap na kati ya modal moko na kosala zumbu na .container-fluidkati ya .modal-body. Na sima, salela ba classes ya système ya grille normal ndenge okosala esika mosusu nionso.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
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.relatedTargetmpe bizaleli ya HTMLdata-* (ekoki kozala na nzela ya jQuery ) 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 mikanda ya makambo ya modal mpo na koyeba makambo mingi na relatedTarget.
New message
Bobongola animation
Variable $modal-fade-transforme déterminaka état ya transformation ya .modal-dialogavant animation ya fade-in modal, $modal-show-transformvariable e déterminaka transformation ya .modal-dialogna 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 .fadekelasi na bilembo na yo ya modal.
Ba hauteurs dynamiques
Soki bosanda ya modal ebongwanaka ntango ezali polele, osengeli kobenga $('#myModal').modal('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 role="dialog"mpe aria-labelledby="...", kosala référence na titre modal, na .modal, mpe role="document"na .modal-dialogyango moko. En plus, okoki kopesa description ya dialogue modal na yo na aria-describedbyon .modal.
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 ».
Extra large modal
...
Large modal
...
Small modal
...
Kosalela yango
Plugin modal ebalusaka ba contenus na yo oyo ebombami na demande, na nzela ya ba attributs ya ba données to JavaScript. Ebakisi mpe .modal-openna <body>mpo na koboya bizaleli ya défilement par défaut mpe ebimisaka a .modal-backdropmpo 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 un modal sans kokoma JavaScript. Set data-toggle="modal"na élément ya contrôleur, lokola bouton, elongo na data-target="#foo"to href="#foo"mpo na ko cibler modal spécifique mpo na ko toggler.
Na nzela ya JavaScript
Benga modal na id myModalna ligne moko ya JavaScript:
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-, lokola na data-backdrop="".
Nkombo
Lolenge
Mbeba
Ndimbola
fond d’écran
boolean to na molongo'static'
ya solo
Ezali na élément moko ya modal-backdrop. Na lolenge mosusu, lakisa staticmpo na fond d’écran oyo ekangaka te modal na kofina to na kofina fungola ya kokima.
clavier ya kosala
boolean
ya solo
Ekangaka modal tango touche ya escape efinamaki
kotya likebi
boolean
ya solo
Etie focus na modal tango e initialiser.
kolakisa
boolean
ya solo
Ezali kolakisa modal tango ebandisami.
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 .
Réajuster manuellement position ya modal soki hauteur ya modal ebongwanaki tango ezali polele (c.a.d. na cas barre de défilement ebimi).
.modal('dispose')
Ebebisaka modal ya élément moko.
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
elakiseli.bs.modal
Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami. Soki euti na kofina, eloko oyo obɛti ezali lokola relatedTargeteloko ya likambo.
elakisami.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 relatedTargeteloko ya likambo.