JS modalna (modal.js)
Wtyczka jest modalne okno dialogowe box / popup, który jest wyświetlany na górze bieżącej strony.
Samouczek o czasowniki modalne, przeczytaj naszą Bootstrap Modal Tutorial .
Modalna Plugin Klasy
| Klasa | Opis |
|---|---|
| .modal | Tworzy modal |
| .modal-content | Style modalna poprawnie z granicy, background-color itp Użyj tej klasy, aby dodać modalna za nagłówka, treści i stopki. |
| .modal-header | Definiuje styl nagłówka modal |
| .modal-body | Określa styl korpusu modalny |
| .modal-footer | Definiuje styl stopce w modalnej. Uwaga: Ten obszar jest wyrównany do prawej domyślnie. Aby to zmienić, zastąpić z CSS text-align: left | center |
| .modal-sm | Określa małą modal |
| .modal-lg | Określa dużą modal |
| .fade | Dodaje efekt animacji / przejście, które zanika modalna i na zewnątrz |
Wyzwalać modalna Via data-* Atrybuty
Dodaj data-toggle="modal" oraz data-target="#modalID" do dowolnego elementu.
Uwaga: W przypadku <a> elementów, pominięcie data-target i użyć href="#modalID" zamiast:
Przykład
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
Spróbuj sam " Wyzwalanie Via JavaScript
Włącz ręcznie za pomocą:
Opcje modalne
Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do teleinformatyczny, jak w data-backdrop="" .
| Nazwa | Rodzaj | Zaniedbanie | Opis | Spróbuj |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Określa, czy modalne powinien mieć ciemne nakładki:
Jeżeli określono wartość "static" , to nie jest możliwe, aby zamknąć modalna po kliknięciu poza nim | Korzystanie JS Wykorzystując dane |
| keyboard | boolean | true | Określa, czy modalne mogą być zamknięte za pomocą klawisza escape (Esc) :
| Korzystanie JS Wykorzystując dane |
| show | boolean | true | Określa, czy pokazywać modalna, gdy zainicjowany | Korzystanie JS Wykorzystując dane |
Metody modalne
Poniższa tabela zawiera listę wszystkich dostępnych metod modalnych.
| metoda | Opis | Spróbuj |
|---|---|---|
| .modal( options ) | Aktywuje zawartość jako modalnej. Patrz wyżej opcje dla prawidłowych wartości | Spróbuj |
| .modal("toggle") | Przełączenie modal | Spróbuj |
| .modal("show") | Otwiera modalna | Spróbuj |
| .modal("hide") | Ukrywa modalna | Spróbuj |
modalne Wydarzenia
Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń modalnych.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| show.bs.modal | Występuje, gdy modalne ma być pokazany | Spróbuj |
| shown.bs.modal | Występuje, gdy modalna jest w pełni pokazane (po zakończeniu przejścia CSS) | Spróbuj |
| hide.bs.modal | Występuje, gdy modalne ma być ukryta | Spróbuj |
| hidden.bs.modal | Występuje, gdy modalna jest całkowicie ukryty (po zakończeniu przejścia CSS) | Spróbuj |
Przykłady
Zaloguj Modal
Poniższy przykład tworzy modalne do logowania:
Przykład
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-default btn-lg" id="myBtn">Login</button>
<!--
Modal -->
<div class="modal fade" id="myModal" 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 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter
password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div> Spróbuj sam "