Bootstrap Modal Plugin
Modální plugin
Modální plugin je dialogové okno/vyskakovací okno, které se zobrazuje v horní části aktuální stránky:
Tip: Pluginy lze zahrnout jednotlivě (pomocí samostatného souboru „modal.js“ Bootstrapu) nebo všechny najednou (pomocí „bootstrap.js“ nebo „bootstrap.min.js“).
Jak vytvořit modal
Následující příklad ukazuje, jak vytvořit základní modal:
Příklad
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Příklad vysvětlen
Část "Spouštěč":
Chcete-li spustit modální okno, musíte použít tlačítko nebo odkaz.
Poté zahrňte dva atributy data-*:
data-toggle="modal"otevře modální oknodata-target="#myModal"ukazuje na id modalu
Část "Modal":
Nadřazený <div>modal musí mít ID, které je stejné jako hodnota atributu data-target použitého ke spuštění modalu ("myModal").
Třída .modalidentifikuje obsah <div>jako modální a zaměří se na něj.
Třída .fadepřidává přechodový efekt, který slábne modal dovnitř a ven. Pokud tento efekt nechcete, odeberte tuto třídu.
Atribut role="dialog"zlepšuje přístupnost pro uživatele, kteří používají čtečky obrazovky.
Třída .modal-dialognastavuje správnou šířku a okraj modalu.
Část "Modální obsah":
Znak " <div>s class="modal-content" nastavuje modální styl (ohraničení, barvu pozadí atd.). Do této <div>části přidejte záhlaví, tělo a zápatí modálu.
Třída .modal-headerse používá k definování stylu pro záhlaví modálu. <button>Uvnitř záhlaví je atribut data-dismiss="modal", který zavře modal, pokud na něj kliknete. Třída .closenastaví styl tlačítka Zavřít a .modal-titletřída stylizuje záhlaví se správnou výškou řádku.
Třída .modal-bodyse používá k definování stylu pro tělo modálu. Sem přidejte jakékoli označení HTML; odstavce, obrázky, videa atd.
Třída .modal-footerse používá k definování stylu pro zápatí modálu. Všimněte si, že tato oblast je ve výchozím nastavení zarovnána doprava.
Modální velikost
Změňte velikost modálu přidáním .modal-sm
třídy pro malé modály nebo .modal-lgtřídy pro velké modály.
Přidejte třídu velikosti k <div>prvku s třídou .modal-dialog:
Malý modal
<div class="modal-dialog modal-sm">
Velký modal
<div class="modal-dialog modal-lg">
Ve výchozím nastavení jsou modály střední velikosti.
Kompletní Bootstrap Modal Reference
Úplnou referenci o všech modálních možnostech, metodách a událostech najdete v našem Bootstrap JS Modal Reference .