Modaalinen
Käytä Bootstrapin JavaScript-modaalilaajennusta lisätäksesi sivustollesi valintaikkunoita lightboxeja, käyttäjäilmoituksia tai täysin mukautettua sisältöä varten.
Kuinka se toimii
Ennen kuin aloitat Bootstrapin modaalikomponentin käytön, muista lukea seuraava, koska valikkovaihtoehdot ovat äskettäin muuttuneet.
- Modaalit on rakennettu HTML:llä, CSS:llä ja JavaScriptillä. Ne sijoitetaan kaiken muun asiakirjan päälle ja poistavat vierityksen,
<body>
jotta modaalinen sisältö vierii sen sijaan. - Modaalin "tausta" napsauttaminen sulkee modaalin automaattisesti.
- Bootstrap tukee vain yhtä modaaliikkunaa kerrallaan. Sisäkkäisiä modaaleja ei tueta, koska uskomme niiden olevan huonoja käyttökokemuksia.
- Modaalit käyttävät
position: fixed
, mikä voi joskus olla hieman erityistä sen renderöinnin suhteen. Aina kun mahdollista, sijoita modaalinen HTML-koodisi ylimmälle tasolle välttääksesi muiden elementtien mahdolliset häiriöt. Saatat todennäköisesti törmätä ongelmiin, kun asetat.modal
toisen kiinteän elementin sisään. - Jälleen kerran, johtuen
position: fixed
modaalien käytöstä mobiililaitteissa on joitain varoituksia. Katso lisätietoja selaimen tukidokumenteistamme . - Koska HTML5 määrittelee semantiikkansa, HTML-
autofocus
attribuutilla ei ole vaikutusta Bootstrap-modaaleihin. Saat saman vaikutuksen käyttämällä mukautettua JavaScriptiä:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Jatka lukemista saadaksesi esittelyt ja käyttöohjeet.
Esimerkkejä
Modaaliset komponentit
Alla on staattinen modaalinen esimerkki (tarkoittaa sen position
ja display
on ohitettu). Mukana ovat modaalinen ylätunniste, modaalinen runko (pakollinen padding
) ja modaalinen alatunniste (valinnainen). Pyydämme lisäämään modaalisia otsikoita hylkäystoimintoihin aina kun mahdollista, tai tarjoamaan toisen nimenomaisen hylkäystoiminnon.
<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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Live-demo
Vaihda toimiva modaalidemo napsauttamalla alla olevaa painiketta. Se liukuu alas ja häivyttää sivun yläreunasta.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Staattinen tausta
Kun tausta on staattinen, modaali ei sulkeudu, kun sitä napsautetaan sen ulkopuolella. Napsauta alla olevaa painiketta kokeillaksesi sitä.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Pitkän sisällön vierittäminen
Kun modaalit tulevat liian pitkiksi käyttäjän näkymään tai laitteelle, ne rullaavat itse sivusta riippumatta. Kokeile alla olevaa demoa nähdäksesi, mitä tarkoitamme.
Voit myös luoda vieritettävän modaalin, jonka avulla voit vierittää modaalirunkoa lisäämällä .modal-dialog-scrollable
siihen .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Pystysuoraan keskitetty
Lisää modaalin .modal-dialog-centered
keskittämiseksi .modal-dialog
pystysuoraan.
<!-- 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>
Työkaluvinkit ja ponnahdusikkunat
Työkaluvihjeitä ja ponnahdusikkunoita voidaan sijoittaa modaaleihin tarpeen mukaan . Kun modaalit suljetaan, myös kaikki työkaluvinkit ja ponnahdusikkunat hylätään automaattisesti.
<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-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>
Ristikon käyttäminen
Hyödynnä Bootstrap-ruudukkojärjestelmää modaalissa sijoittamalla .container-fluid
sisään .modal-body
. Käytä sitten normaaleja ruudukkojärjestelmäluokkia kuten missä tahansa muuallakin.
<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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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>
Vaihteleva modaalinen sisältö
Onko sinulla joukko painikkeita, jotka kaikki laukaisevat saman modaalin hieman erilaisella sisällöllä? Käytä event.relatedTarget
ja HTML - data-*
attribuutteja (mahdollisesti jQueryn kautta ) muuttaaksesi modaalin sisältöä sen mukaan, mitä painiketta napsautettiin.
Alla on live-demo, jota seuraa esimerkki HTML:stä ja JavaScriptistä. Saat lisätietoja lukemalla modaalitapahtumien asiakirjoja relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Vaihda animaatiota
Muuttuja $modal-fade-transform
määrittää muunnostilan .modal-dialog
ennen modaalista häivytysanimaatiota, $modal-show-transform
muuttuja määrittää muunnoksen .modal-dialog
modaalisen häivytysanimaatioon lopussa.
Jos haluat esimerkiksi zoomausanimaatiota, voit asettaa $modal-fade-transform: scale(.8)
.
Poista animaatio
Jos modaalit vain näkyvät sen sijaan, että ne katoavat näkyvistä, poista .fade
luokka modaalimerkinnöistäsi.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynaamiset korkeudet
Jos modaalin korkeus muuttuu sen ollessa auki, sinun tulee soittaa $('#myModal').modal('handleUpdate')
ja säätää modaalin sijainti uudelleen, jos vierityspalkki tulee näkyviin.
Esteettömyys
Muista lisätä aria-labelledby="..."
modaalinimikkeeseen viitaten .modal
. Lisäksi voit antaa kuvauksen modaalisesta dialogistasi aria-describedby
päällä .modal
. Huomaa, että sinun ei tarvitse lisätä, role="dialog"
koska lisäämme sen jo JavaScriptin kautta.
YouTube-videoiden upottaminen
YouTube-videoiden upottaminen modaaleihin vaatii ylimääräisen JavaScriptin (ei Bootstrapissa), jotta toisto pysähtyy automaattisesti ja paljon muuta. Katso tästä hyödyllisestä Stack Overflow -viestistä lisätietoja.
Valinnaiset koot
Modaaleilla on kolme valinnaista kokoa, jotka ovat saatavilla modifiointiluokkien kautta sijoitettaviksi .modal-dialog
. Nämä koot alkavat tietyissä keskeytyspisteissä välttää vaakasuuntaiset vierityspalkit kapeammissa kuvaporteissa.
Koko | Luokka | Modaalinen maksimileveys |
---|---|---|
Pieni | .modal-sm |
300px |
Oletus | Ei mitään | 500px |
Suuri | .modal-lg |
800px |
XL | .modal-xl |
1140px |
Oletusmodaalimme ilman modifikaatioita muodostaa "keskikokoisen" modaalin.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Käyttö
Modaalilaajennus vaihtaa piilotetun sisällön tarpeen mukaan tietomääritteiden tai JavaScriptin avulla. Se myös lisää .modal-open
oletusarvoisen <body>
vierityskäyttäytymisen ohittamiseen ja luo .modal-backdrop
napsautusalueen, joka hylkää näytetyt modaalit, kun klikkaat modaalin ulkopuolella.
Tietomääritteiden kautta
Aktivoi modaali kirjoittamatta JavaScriptiä. Aseta data-toggle="modal"
ohjainelementille, kuten painikkeelle, yhdessä data-target="#foo"
tai href="#foo"
kohdistaaksesi tiettyyn modaaliin vaihtaaksesi.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScriptin kautta
Kutsu modaali tunnuksella myModal
yhdellä JavaScript-rivillä:
$('#myModal').modal(options)
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-
, kuten kohdassa data-backdrop=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
taustalla | boolean tai merkkijono'static' |
totta | Sisältää modaalitaustaelementin. Vaihtoehtoisesti voit määrittää static taustalle, joka ei sulje modaalia napsautettaessa. |
näppäimistö | boolean | totta | Sulkee modaalin, kun Esc-näppäintä painetaan |
keskittyä | boolean | totta | Keskittää modaaliin alustuksen yhteydessä. |
näytä | boolean | totta | Näyttää modaalin alustuksen yhteydessä. |
menetelmät
Asynkroniset menetelmät ja siirtymät
Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .
.modal(options)
Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Vaihtaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa näytetty tai piilotettu (ts. ennen kuin shown.bs.modal
tapahtuma hidden.bs.modal
tapahtuu).
$('#myModal').modal('toggle')
.modal('show')
Avaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todellisuudessa esitetty (eli ennen shown.bs.modal
tapahtumaa).
$('#myModal').modal('show')
.modal('hide')
Piilottaa modaalin manuaalisesti. Palaa soittajalle ennen kuin modaali on todella piilotettu (ts. ennen hidden.bs.modal
tapahtuman tapahtumista).
$('#myModal').modal('hide')
.modal('handleUpdate')
Säädä modaalin asentoa manuaalisesti uudelleen, jos modaalin korkeus muuttuu sen ollessa auki (eli jos vierityspalkki tulee näkyviin).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Tuhoaa elementin modaalin.
Tapahtumat
Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten. Kaikki modaalitapahtumat laukaistaan itse modaaliin (eli kohtaan <div class="modal">
).
Tapahtumatyyppi | Kuvaus |
---|---|
show.bs.modal | Tämä tapahtuma käynnistyy välittömästi, kun show instanssimenetelmää kutsutaan. Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä relatedTarget tapahtuman ominaisuutena. |
näytetään.bs.modal | Tämä tapahtuma käynnistyy, kun modaali on asetettu käyttäjän näkyväksi (odottaa CSS-siirtymien valmistumista). Jos se johtuu napsautuksesta, napsautettu elementti on käytettävissä relatedTarget tapahtuman ominaisuutena. |
hide.bs.modal | Tämä tapahtuma käynnistyy välittömästi, kun hide instanssimenetelmää on kutsuttu. |
piilotettu.bs.modal | Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). |
hidePrevented.bs.modal | Tämä tapahtuma käynnistyy, kun modaali näytetään, sen tausta on static ja napsautus modaalin ulkopuolella tai estonäppäintä painetaan näppäimistön valinnalla tai data-keyboard arvolla false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})