Wtyczka modalna Bootstrap
Wtyczka modalna
Wtyczka Modal to okno dialogowe/wyskakujące okienko, które jest wyświetlane na górze bieżącej strony:
Wskazówka: Wtyczki można dołączać pojedynczo (za pomocą indywidualnego pliku „modal.js” Bootstrap) lub wszystkie naraz (za pomocą „bootstrap.js” lub „bootstrap.min.js”).
Jak stworzyć moda?
Poniższy przykład pokazuje, jak utworzyć podstawowy modalny:
Przykład
<!-- 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>
Przykład wyjaśniony
Część „Wyzwalacz”:
Aby uruchomić okno modalne, musisz użyć przycisku lub linku.
Następnie dołącz dwa atrybuty data-*:
data-toggle="modal"otwiera okno modalnedata-target="#myModal"wskazuje na id modalnego
Część „Modalna”:
Rodzic <div>modu musi mieć identyfikator, który jest taki sam jak wartość atrybutu data-target używanego do wyzwalania modu ("myModal").
Klasa .modalidentyfikuje zawartość <div>jako modalną i skupia się na niej.
Klasa .fadedodaje efekt przejścia, który powoduje zanikanie i zanikanie modalnego. Usuń tę klasę, jeśli nie chcesz tego efektu.
Atrybut role="dialog"poprawia dostępność dla osób korzystających z czytników ekranu.
Klasa .modal-dialogustawia odpowiednią szerokość i margines modalny.
Część „Treść modalna”:
The <div>with class="modal-content" stylizuje modalny (obramowanie, kolor tła itp.). Wewnątrz tego <div>dodaj nagłówek, treść i stopkę modalna.
Klasa .modal-headersłuży do definiowania stylu nagłówka modalnego. Wewnątrz <button>nagłówka znajduje się data-dismiss="modal"atrybut, który zamyka modalny po kliknięciu. Klasa .closestylizuje przycisk zamykania, a .modal-titleklasa stylizuje nagłówek z odpowiednią wysokością linii.
Klasa .modal-bodysłuży do definiowania stylu treści modalnej. Dodaj tutaj dowolny znacznik HTML; akapity, obrazy, filmy itp.
Klasa .modal-footersłuży do definiowania stylu stopki modalnej. Zauważ, że ten obszar jest domyślnie wyrównany do prawej.
Rozmiar modalny
Zmień rozmiar modu, dodając .modal-sm
klasę dla małych modów lub .modal-lgklasę dla 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">
Domyślnie modalności są średniej wielkości.
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 .