Gebruik Bootstrap se JavaScript-modale inprop om dialoogvensters by jou werf te voeg vir ligbokse, gebruikerskennisgewings of heeltemal pasgemaakte inhoud.
Hoe dit werk
Voordat u met Bootstrap se modale komponent begin, moet u die volgende lees aangesien ons spyskaartopsies onlangs verander het.
Modale word gebou met HTML, CSS en JavaScript. Hulle is oor alles anders in die dokument geposisioneer en verwyder rol van die <body>sodat modale inhoud eerder blaai.
Deur op die modale "agtergrond" te klik, sal die modale outomaties toemaak.
Bootstrap ondersteun slegs een modale venster op 'n slag. Geneste modale word nie ondersteun nie, aangesien ons glo dat dit swak gebruikerservarings is.
Modale gebruik position: fixed, wat soms 'n bietjie spesifiek kan wees oor die weergawe daarvan. Waar moontlik, plaas jou modale HTML in 'n topvlak posisie om moontlike inmenging van ander elemente te vermy. U sal waarskynlik probleme ondervind wanneer u 'n .modalbinne 'n ander vaste element nesmaak.
Weereens, as gevolg van position: fixed, is daar 'n paar waarskuwings met die gebruik van modale op mobiele toestelle. Sien ons blaaierondersteuningsdokumente vir besonderhede.
As gevolg van hoe HTML5 sy semantiek definieer, het die autofocusHTML-kenmerk geen effek in Bootstrap-modale nie. Om dieselfde effek te bereik, gebruik 'n paar persoonlike JavaScript:
Hou aan lees vir demonstrasies en gebruiksriglyne.
Voorbeelde
Modale komponente
Hieronder is 'n statiese modale voorbeeld (wat beteken dat dit positionen displayis oorskryf). Ingesluit is die modale kopskrif, modale liggaam (vereis vir padding), en modale voetskrif (opsioneel). Ons vra dat jy, waar moontlik, modale opskrifte met afwyshandelinge insluit, of 'n ander eksplisiete afwysaksie verskaf.
Modale titel
Modale hoofteks gaan hier.
Regstreekse demo
Wissel 'n werkende modale demo deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.
Modal title
Woohoo, you're reading this text in a modal!
Deur lang inhoud te blaai
Wanneer modale te lank word vir die gebruiker se kykpoort of toestel, blaai hulle onafhanklik van die bladsy self. Probeer die demonstrasie hieronder om te sien wat ons bedoel.
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.
Vertikaal gesentreer
Voeg .modal-dialog-centeredby .modal-dialogom die modaal vertikaal te sentreer.
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.
Gereedskapwenke en popovers
Tooltips en popovers kan binne modale geplaas word soos nodig. Wanneer modale gesluit is, word enige gereedskapwenke en popovers binne ook outomaties van die hand gewys.
Gebruik die Bootstrap-roosterstelsel binne 'n modaal deur .container-fluidbinne die .modal-body. Gebruik dan die normale roosterstelselklasse soos op enige ander plek.
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
Wisselende modale inhoud
Het jy 'n klomp knoppies wat almal dieselfde modaal aktiveer met effens verskillende inhoud? Gebruik event.relatedTargeten HTML- data-*kenmerke (moontlik via jQuery ) om die inhoud van die modaal te verander na gelang van watter knoppie geklik is.
Hieronder is 'n lewendige demonstrasie gevolg deur voorbeeld HTML en JavaScript. Vir meer inligting, lees die modale gebeurtenisse dokumente vir besonderhede oor relatedTarget.
New message
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@mdo">Open modal for @mdo</button><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@fat">Open modal for @fat</button><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@getbootstrap">Open modal for @getbootstrap</button><divclass="modal fade"id="exampleModal"tabindex="-1"role="dialog"aria-labelledby="exampleModalLabel"aria-hidden="true"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalLabel">New message</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body"><form><divclass="form-group"><labelfor="recipient-name"class="col-form-label">Recipient:</label><inputtype="text"class="form-control"id="recipient-name"></div><divclass="form-group"><labelfor="message-text"class="col-form-label">Message:</label><textareaclass="form-control"id="message-text"></textarea></div></form></div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Send message</button></div></div></div></div>
Verwyder animasie
Vir modale wat bloot verskyn eerder as om in te vervaag om te sien, verwyder die .fadeklas van jou modale opmaak.
Dinamiese hoogtes
As die hoogte van 'n modaal verander terwyl dit oop is, moet jy bel $('#myModal').modal('handleUpdate')om die modaal se posisie aan te pas indien 'n skuifbalk verskyn.
Toeganklikheid
Maak seker dat jy role="dialog"en aria-labelledby="...", met verwysing na die modale titel, by .modal, en role="document"na die .modal-dialogself byvoeg. Daarbenewens kan jy 'n beskrywing van jou modale dialoog gee met aria-describedbyop .modal.
Inbedding van YouTube-video's
Om YouTube-video's in modale in te sluit, vereis bykomende JavaScript wat nie in Bootstrap is nie om outomaties afspeel te stop en meer. Sien hierdie nuttige Stack Overflow-plasing vir meer inligting.
Opsionele groottes
Modale het twee opsionele groottes, beskikbaar via wysigerklasse om op 'n .modal-dialog. Hierdie groottes skop in by sekere breekpunte om horisontale skuifbalke op nouer uitsigpoorte te vermy.
Large modal
...
Small modal
...
Gebruik
Die modale inprop skakel jou verborge inhoud op aanvraag, via data-kenmerke of JavaScript. Dit dra ook by .modal-opentot die <body>om verstek blaai-gedrag te ignoreer en genereer 'n .modal-backdropom 'n klikarea te verskaf om gewysde modale te verwyder wanneer daar buite die modaal geklik word.
Via data-eienskappe
Aktiveer 'n modaal sonder om JavaScript te skryf. Stel data-toggle="modal"op 'n beheerderelement, soos 'n knoppie, saam met 'n data-target="#foo"of href="#foo"om 'n spesifieke modaal te rig om te wissel.
Via JavaScript
Roep 'n modaal met ID myModalmet 'n enkele reël JavaScript:
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-backdrop="".
Naam
Tik
Verstek
Beskrywing
agtergrond
boolean of die snaar'static'
waar
Sluit 'n modale agtergrondelement in. Alternatiewelik, spesifiseer staticvir 'n agtergrond wat nie die modaal toemaak met klik nie.
sleutelbord
boolean
waar
Maak die modaal toe wanneer escape-sleutel gedruk word
fokus
boolean
waar
Plaas die fokus op die modaal wanneer geïnisialiseer.
Wys
boolean
waar
Toon die modaal wanneer geïnisialiseer.
Metodes
Asinchroniese metodes en oorgange
Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .
Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.
.modal('toggle')
Wissel 'n modaal handmatig. Keer terug na die oproeper voordat die modaal werklik gewys of versteek is (dws voordat die shown.bs.modalof hidden.bs.modalgebeurtenis plaasvind).
.modal('show')
Maak 'n modaal handmatig oop. Keer terug na die oproeper voordat die modaal werklik gewys is (dws voor die shown.bs.modalgebeurtenis plaasvind).
.modal('hide')
Versteek 'n modaal handmatig. Keer terug na die oproeper voordat die modaal eintlik versteek is (dws voor die hidden.bs.modalgebeurtenis plaasvind).
.modal('handleUpdate')
Pas die modaal se posisie handmatig aan as die hoogte van 'n modaal verander terwyl dit oop is (dws indien 'n rolbalk verskyn).
.modal('dispose')
Vernietig 'n element se modaal.
Gebeurtenisse
Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel. Alle modale gebeurtenisse word op die modaal self afgevuur (dws by die <div class="modal">).
Soort gebeurtenis
Beskrywing
wys.bs.modaal
Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word. As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTargeteienskap van die gebeurtenis.
getoon.bs.modaal
Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi). As dit deur 'n klik veroorsaak word, is die geklikte element beskikbaar as die relatedTargeteienskap van die gebeurtenis.
verberg.bs.modaal
Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
verborge.bs.modale
Hierdie gebeurtenis word afgevuur wanneer die modaal klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).