Bootstrap 4 Modal
Bootstrap 4 Modal
Modální komponenta je dialogové okno/vyskakovací okno, které se zobrazuje v horní části aktuální stránky:
Jak vytvořit modal
Následující příklad ukazuje, jak vytvořit základní modal:
Příklad
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Přidat animaci
Použijte .fadetřídu k přidání efektu blednutí při otevírání a zavírání modálu:
Příklad
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Modální velikost
Změňte velikost modálu přidáním .modal-sm
třídy pro malé modály, .modal-lgtřídy pro velké modály nebo .modal-xlextra 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">
Extra velký modal
<div class="modal-dialog modal-xl">
Ve výchozím nastavení jsou modály „střední“ velikosti.
Středový modal
Vycentrujte modal svisle a vodorovně na stránce s .modal-dialog-centered
třídou:
Příklad
<div class="modal-dialog modal-dialog-centered">
Rolovací modal
Když máte uvnitř modálu hodně obsahu, přidá se na stránku posuvník. Abyste tomu porozuměli, podívejte se na níže uvedené příklady:
Příklad
<div class="modal-dialog">
Je však možné posouvat pouze uvnitř modalu namísto samotné stránky .modal-dialog-scrollablepřidáním .modal-dialog:
Příklad
<div class="modal-dialog modal-dialog-scrollable">
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 .