JS Modal (modal.js)
Der Modal-Plugin ist ein Dialogfeld / Popup-Fenster, das oben auf der aktuellen Seite angezeigt wird.
Ein Tutorial über Modalverben, unsere lesen Bootstrap Modal Tutorial .
Die Modal Plugin Klassen
| Klasse | Beschreibung |
|---|---|
| .modal | Erstellt eine modale |
| .modal-content | Stile der modale richtig mit Rahmen, Hintergrund-Farbe, etc. diese Klasse die modal per Kopf, Körper und Fußzeile hinzuzufügen. |
| .modal-header | Legt den Stil für den Header des Modal |
| .modal-body | Legt den Stil für den Körper des Modal |
| .modal-footer | Legt den Stil für die Fußzeile des Modal. Hinweis: Dieser Bereich standardmäßig rechtsbündig ist. Um dies zu ändern, überschreiben Sie CSS mit text-align: left | center |
| .modal-sm | Gibt einen kleinen modal |
| .modal-lg | Gibt eine große modal |
| .fade | Fügt eine Animation / Übergangseffekt, der die modal ein- und ausblendet |
Auslöser , um den Modal Via data-* Attribute
In data-toggle="modal" und data-target="#modalID" auf ein beliebiges Element.
Hinweis: Bei <a> Elemente weglassen data-target , und verwenden Sie href="#modalID" statt:
Beispiel
<!-- 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>
Versuch es selber " Trigger über JavaScript
Aktivieren Sie manuell mit:
Modal-Optionen
Die Optionen können über Datenattribute oder JavaScript übergeben werden. Die Option Namen Daten-, wie in für Datenattribute, fügen Sie data-backdrop="" .
| Name | Art | Standard | Beschreibung | Versuch es |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Gibt an, ob die modale eine dunkle Overlay haben sollte:
Wenn Sie den Wert angeben "static" , ist es nicht möglich , die modal zu schließen , wenn sie außerhalb des darauf klicken | Mit JS Mit den Daten |
| keyboard | boolean | true | Gibt an, ob die modale mit der Escape - Taste geschlossen werden (Esc) :
| Mit JS Mit den Daten |
| show | boolean | true | Gibt an, ob die modale zu zeigen, wenn initialisiert | Mit JS Mit den Daten |
Modal Methoden
Die folgende Tabelle listet alle verfügbaren modalen Methoden.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .modal( options ) | Aktiviert den Inhalt als modal. Siehe oben stehenden Optionen für gültige Werte | Versuch es |
| .modal("toggle") | Blendet die modal | Versuch es |
| .modal("show") | Öffnet das modal | Versuch es |
| .modal("hide") | Blendet die modal | Versuch es |
Modal Veranstaltungen
Die folgende Tabelle listet alle verfügbaren modal Veranstaltungen.
| Event | Beschreibung | Versuch es |
|---|---|---|
| show.bs.modal | Tritt ein, wenn die modale über gezeigt werden soll | Versuch es |
| shown.bs.modal | Tritt ein, wenn das modale vollständig angezeigt wird (nach dem CSS-Übergänge abgeschlossen haben) | Versuch es |
| hide.bs.modal | Tritt ein, wenn das modale etwa ist versteckt werden | Versuch es |
| hidden.bs.modal | Tritt ein, wenn das modale vollständig verborgen ist (nachdem CSS-Übergänge abgeschlossen haben) | Versuch es |
Beispiele
Anmelden Modal
Das folgende Beispiel erzeugt eine modale für die Anmeldung:
Beispiel
<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> Versuch es selber "