Bootstrap 4 Modalne
Bootstrap 4 Modalne
Komponent modalny to okno dialogowe/wyskakujące okienko, które jest wyświetlane u góry bieżącej strony:
Jak stworzyć moda?
Poniższy przykład pokazuje, jak utworzyć podstawowy modalny:
Przykład
<!-- 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>
Dodaj animację
Użyj .fadeklasy, aby dodać efekt zanikania podczas otwierania i zamykania modalnego:
Przykład
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Rozmiar modalny
Zmień rozmiar modu, dodając .modal-sm
klasę dla małych modów, .modal-lgklasę dla dużych modów lub .modal-xldla bardzo dużych modów.
Dodaj klasę rozmiaru do <div>elementu z class .modal-dialog:
Mały modalny
<div class="modal-dialog modal-sm">
Duży modalny
<div class="modal-dialog modal-lg">
Bardzo duży modalny
<div class="modal-dialog modal-xl">
Domyślnie modalności mają „średni” rozmiar.
Wyśrodkowany modalny
Wyśrodkuj modalny w pionie i poziomie w obrębie strony za pomocą .modal-dialog-centered
klasy:
Przykład
<div class="modal-dialog modal-dialog-centered">
Przewijanie modalne
Gdy masz dużo treści w module modalnym, do strony dodawany jest pasek przewijania. Zobacz przykłady poniżej, aby to zrozumieć:
Przykład
<div class="modal-dialog">
Jednak możliwe jest przewijanie tylko wewnątrz modalnego, a nie samej strony, dodając .modal-dialog-scrollabledo .modal-dialog:
Przykład
<div class="modal-dialog modal-dialog-scrollable">
Kompletne odniesienie do modalności Bootstrapa
Aby uzyskać pełne informacje o wszystkich opcjach, metodach i zdarzeniach modalnych, przejdź do naszego dokumentu Bootstrap JS Modal Reference .