Modalna Plugin
Wtyczka jest modalne okno dialogowe Okno / popup, który jest wyświetlany na górze bieżącej strony:
Wskazówka: Wtyczki mogą być użyte pojedynczo (stosując indywidualne Bootstrap za "modal.js" pliku) lub wszystkie na raz (za pomocą "bootstrap.js" lub "bootstrap.min.js" ).
Jak utworzyć modalne
Poniższy przykład pokazuje, jak utworzyć podstawowy modalne:
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>
Spróbuj sam " Przykład Poradnik
"Trigger" część:
Aby wywołać okno modalne, trzeba użyć przycisku lub łącza.
Wtedy to dwie data-* atrybuty:
-
data-toggle="modal"otwiera okno modalne -
data-target="#myModal"wskazuje na id modal
"Modal" część:
Rodzic <div> modalnego musi posiadać identyfikator, który jest taki sam jak wartość atrybutu docelowego danych używany do wyzwalania modalna ("myModal") .
.modal Klasy identyfikuje zawartość <div> jako modalnego i przynosi ostrość do niego.
.fade Klasy dodaje efekt przejścia, który zanika modalna i na zewnątrz. Usuń tej klasy, jeśli nie chcesz tego efektu.
Atrybut role="dialog" poprawia dostępność dla osób korzystających z czytników ekranowych.
.modal-dialog klasa ustawia odpowiednią szerokość i margines modalnej.
"Zawartość Modal" część:
<div> z class="modal-content " style na granicy, modowa (background-color, itd.). Wewnątrz tego <div> , dodać modalna za nagłówka, treści i stopki.
.modal-header klasa jest używana do określenia styl nagłówka modalnej. <button> wewnątrz nagłówka ma data-dismiss="modal" atrybut, który zamyka modalna po kliknięciu na nim. W .close klasy style przycisk Zamknij i .modal-title klasy stylów nagłówka z właściwego line-height.
.modal-body klasa jest używana do określenia styl korpusu modalnej. Dodaj żadnych znaczników HTML tutaj; akapity, obrazy, filmy, etc.
.modal-footer klasa jest używana do określenia styl stopce modalnej. Należy pamiętać, że obszar ten jest wyrównany do prawej domyślnie.
Modal Size
Zmień rozmiar modalnym dodając .modal-sm klasy dla małych czasowniki modalne lub .modal-lg klasy dla dużych czasowniki modalne.
Dodaj klasę wielkości do <div> elementu klasy z .modal-dialog :
 | Domyślnie, czasowniki modalne są średniej wielkości. |
|---|
Wypełnij Bootstrap Modal Reference
Pełną odniesieniu do wszystkich opcji modalnych, metod i zdarzeń, przejdź do naszej Bootstrap JS Modal Reference .