Modal
Használja a Bootstrap JavaScript modális beépülő modulját, hogy párbeszédpaneleket adjon webhelyéhez átvilágítódobozok, felhasználói értesítések vagy teljesen egyéni tartalom megjelenítéséhez.
Hogyan működik
Mielőtt hozzákezdene a Bootstrap modális összetevőjéhez, feltétlenül olvassa el a következőket, mivel menüopcióink nemrég megváltoztak.
- A modálok HTML, CSS és JavaScript segítségével épülnek fel. Ezek a dokumentumban minden más fölé helyezkednek el, és eltávolítják a görgetést,
<body>
így a modális tartalom görgethet helyette. - A modális „háttér”-re kattintva a modális automatikusan bezárul.
- A Bootstrap egyszerre csak egy modális ablakot támogat. A beágyazott modálisok nem támogatottak, mivel véleményünk szerint rossz felhasználói élményt jelentenek.
- A modálisok a -t használják
position: fixed
, ami néha egy kicsit sajátos lehet a megjelenítést illetően. Amikor csak lehetséges, helyezze el a modális HTML-kódot a legfelső szintű pozícióba, hogy elkerülje az egyéb elemek esetleges interferenciáját. Valószínűleg problémákba ütközik, ha egy.modal
másik rögzített elembe ágyaz be egyet. - Ismételten a(z) miatt
position: fixed
van néhány figyelmeztetés a modálok mobileszközökön történő használatával kapcsolatban. A részletekért tekintse meg a böngésző támogatási dokumentumait . - A HTML5 szemantikája meghatározása miatt a
autofocus
HTML attribútumnak nincs hatása a Bootstrap modálisra. Ugyanezen hatás eléréséhez használjon néhány egyéni JavaScriptet:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
. Tekintse
meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .
Olvassa tovább a bemutatókat és a használati útmutatókat.
Példák
Modális alkatrészek
Az alábbiakban egy statikus modális példa látható (ami azt jelenti, hogy a position
és display
felül lett írva). Tartalmazza a modális fejlécet, a modális törzset (szükséges a padding
-hoz) és a modális láblécet (opcionális). Kérjük, hogy lehetőség szerint adjon meg modális fejlécet az elvetési műveletekkel, vagy adjon meg egy másik kifejezett elvetési műveletet.
<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>
Élő demó
Az alábbi gombra kattintva válthat egy működő modális bemutatót. Lecsúszik, és elhalványul az oldal tetejétől.
<!-- 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>
Statikus háttér
Ha a háttér statikusra van állítva, a modál nem zár be, ha kívülre kattint. Kattintson az alábbi gombra a kipróbáláshoz.
<!-- 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>
Hosszú tartalom görgetése
Ha a modálisok túl hosszúak lesznek a felhasználó nézetablakához vagy eszközéhez, magától az oldaltól függetlenül görgetnek. Próbálja ki az alábbi bemutatót, hogy lássa, mire gondolunk.
Létrehozhat egy görgethető modált is, amely lehetővé teszi a modális törzs görgetését a .modal-dialog-scrollable
hozzáadással .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Függőlegesen középre
Add hozzá .modal-dialog-centered
a .modal-dialog
modális függőleges középre állításához.
<!-- 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>
Eszköztippek és előugró ablakok
Az eszköztippek és az előugró ablakok szükség szerint elhelyezhetők a modálisokon belül. A modálok bezárásakor a rendszer automatikusan elveti az összes elemleírást és felugró ablakot is.
<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>
A rács használata
Használja a Bootstrap rácsrendszert egy modálison .container-fluid
belül a .modal-body
. Ezután használja a normál grid rendszerosztályokat, mint bárhol máshol.
<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>
Változó modális tartalom
Van egy csomó gombja, amelyek mindegyike ugyanazt a módot indítja el, kissé eltérő tartalommal? Használja a event.relatedTarget
és HTML - data-*
attribútumokat (esetleg a jQuery segítségével ) a modál tartalmának megváltoztatásához attól függően, hogy melyik gombra kattintott.
Az alábbiakban egy élő demó látható, amelyet példa HTML és JavaScript követ. További információért olvassa el a modális események dokumentumait a következővel kapcsolatos részletekért 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)
})
Animáció módosítása
A változó a modális fade-in animáció előtti $modal-fade-transform
transzformáció állapotát határozza meg, a változó pedig a modális fade-in animáció végén a transzformációt..modal-dialog
$modal-show-transform
.modal-dialog
Ha például nagyító animációt szeretne, beállíthatja a $modal-fade-transform: scale(.8)
.
Animáció eltávolítása
Az olyan modálisok esetében, amelyek egyszerűen megjelennek, nem pedig elhalványulnak, távolítsa el az .fade
osztályt a modális jelölésből.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamikus magasságok
Ha egy modál magassága megváltozik, miközben nyitva van, akkor hívnia kell, hogy módosítsa $('#myModal').modal('handleUpdate')
a modál helyzetét, ha megjelenik egy görgetősáv.
Megközelíthetőség
Ügyeljen arra, hogy aria-labelledby="..."
a modális címre hivatkozva adja hozzá a .modal
. Ezenkívül megadhatja a modális párbeszédpanel leírását a aria-describedby
on .modal
. Vegye figyelembe, hogy nem kell hozzáadnia, role="dialog"
mivel már JavaScripten keresztül hozzáadjuk.
YouTube-videók beágyazása
A YouTube-videók modálisba ágyazásához további JavaScriptre van szükség, nem a Bootstrapban a lejátszás automatikus leállításához és még sok máshoz. További információért tekintse meg ezt a hasznos Stack Overflow bejegyzést .
Választható méretek
A modáloknak három választható mérete van, amelyek módosító osztályokon keresztül érhetők el, amelyeket egy .modal-dialog
. Ezek a méretek bizonyos töréspontokon lépnek életbe, hogy elkerüljék a vízszintes görgetősávokat a szűkebb nézetablakban.
Méret | Osztály | Modális maximális szélesség |
---|---|---|
Kicsi | .modal-sm |
300px |
Alapértelmezett | Egyik sem | 500px |
Nagy | .modal-lg |
800px |
Extra nagy | .modal-xl |
1140px |
Az alapértelmezett módosító nélküli modálunk a „közepes” méretű modális.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Használat
A modális beépülő modul igény szerint váltja a rejtett tartalmat adatattribútumok vagy JavaScript segítségével. Ezenkívül hozzáadja .modal-open
az <body>
alapértelmezett görgetési viselkedés felülbírálásához, és létrehoz .modal-backdrop
egy kattintási területet a megjelenített modálok elvetéséhez, ha a modálison kívül kattintanak.
Adatattribútumokon keresztül
Aktiválja a modált JavaScript írása nélkül. Állítsa data-toggle="modal"
be a vezérlőelemet, például egy gombot, a data-target="#foo"
vagy a gombbal együtt, href="#foo"
hogy egy adott módot célozzon a váltáshoz.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScripten keresztül
Hívjon egy modált azonosítóval myModal
egyetlen soros JavaScripttel:
$('#myModal').modal(options)
Lehetőségek
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-
következőhöz: data-backdrop=""
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
háttér | logikai érték vagy a karakterlánc'static' |
igaz | Modális háttérelemet tartalmaz. Alternatív megoldásként static olyan hátteret adjon meg, amely nem zárja be a modált kattintásra. |
billentyűzet | logikai érték | igaz | Bezárja a modált az Escape billentyű lenyomásakor |
fókusz | logikai érték | igaz | Inicializáláskor a modálisra helyezi a fókuszt. |
előadás | logikai érték | igaz | Megjeleníti a modált inicializáláskor. |
Mód
Aszinkron módszerek és átmenetek
Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .
További információért tekintse meg JavaScript dokumentációnkat .
.modal(options)
Aktiválja a tartalmat modálisként. Elfogad egy opcionális opciót object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manuálisan vált egy módot. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne vagy elrejtve (azaz a shown.bs.modal
vagy hidden.bs.modal
esemény bekövetkezte előtt).
$('#myModal').modal('toggle')
.modal('show')
Manuálisan megnyit egy modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen megjelenne (azaz az shown.bs.modal
esemény bekövetkezte előtt).
$('#myModal').modal('show')
.modal('hide')
Manuálisan elrejti a modált. Visszatér a hívóhoz, mielőtt a modális ténylegesen el lett volna rejtve (azaz az hidden.bs.modal
esemény bekövetkezte előtt).
$('#myModal').modal('hide')
.modal('handleUpdate')
Állítsa be manuálisan a modál helyzetét, ha a modál magassága nyitva van (vagyis ha megjelenik egy görgetősáv).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Elpusztítja egy elem modálisát.
Események
A Bootstrap modális osztálya felfed néhány eseményt a modális funkciókhoz való kapcsolódáshoz. Minden modális esemény magára a modálisra (azaz a <div class="modal">
)-ra kerül.
Esemény típus | Leírás |
---|---|
show.bs.modal | Ez az esemény azonnal aktiválódik a show példánymetódus meghívásakor. Ha kattintás okozza, a kattintott elem relatedTarget az esemény tulajdonságaként elérhető. |
látható.bs.modal | Ez az esemény akkor indul el, amikor a modális láthatóvá vált a felhasználó számára (megvárja, amíg a CSS-átmenetek befejeződnek). Ha kattintás okozza, a kattintott elem relatedTarget az esemény tulajdonságaként elérhető. |
elrejteni.bs.modal | Ez az esemény azonnal elindul, amikor a hide példánymetódus meghívásra került. |
rejtett.bs.modal | Ez az esemény akkor indul el, amikor a modális elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
hidePrevented.bs.modal | Ez az esemény akkor indul el, amikor a modális látható, háttere látható, static és a modálison kívüli kattintás vagy az Escape billentyű lenyomása történik a billentyűzet opcióval vagy a data-keyboard beállítással false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})