Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap-Dropdown-Menü-Plugin Bootstrap-Übergangseffekt-Plugin

Bootstrap-Modaldockfenster (Modal)-Plugin

Das Modaldockfenster (Modal) ist ein übergeordnetes Fenster, das über dem Elternfenster liegt. Normalerweise ist das Ziel, Inhalte aus einer separaten Quelle anzuzeigen, die einige Interaktionen ermöglichen können, ohne das Elternfenster zu verlassen. Das Untefenster kann Informationen, Interaktionen usw. bereitstellen.

wenn Sie die Funktionen des Plugins单独引用müssen, dann müssen Sie modal.jserwähnt, können Sie Bootstrap-Plugin-Übersicht wie im Kapitel bootstrap.js oder die komprimierte Version bootstrap.min.js。

Verwendung

Sie können das versteckte Inhaltsmodaldockfenster (Modal) umschalten:

durch das data-AttributEigenschaften auf dem Steuerelement (z.B. Button oder Link) festlegen data-toggle="modal"und legen Sie gleichzeitig fest data-target="#identifier" oder href="#identifier" bestimmen Sie das spezifische Modaldockfenster, das umgeschaltet werden soll (mit id="identifier").
Durch JavaScript：Mit dieser Technik können Sie mit einem einfachen Zeilen JavaScript den Modaldialog mit id="identifier" aufrufen:
```
$('#identifier').modal(options)
```

Online-Beispiel

Ein Beispiel für einen statischen Modaldialog, wie im folgenden Beispiel gezeigt:

Online-Beispiel

Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Modaldialog(Modal)Plugin</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Erstellen Sie Modaldialog(Modal)</h2>
<!--　Schaltfläche löst das Modal aus　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Beginnen Sie mit der Demonstration des Modals
</button>
<!--　Modal-Box (Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"　aria-hidden="true">
					×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					Modal-Box (Modal) Titel
				</h4>
			</div>
			<div class="modal-body">
				Fügen Sie hier einige Texte hinzu
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　data-dismiss="modal">Schließen
				</button>
				<button type="button" class="btn btn-primary">
					Änderungen übernehmen
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal　-->
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Codeerklärung:

Mit dem Modaldialog benötigen Sie einen Trigger. Sie können Buttons oder Links verwenden. Hier verwenden wir Buttons.
Wenn Sie sich die obige Codezeile genau ansehen, dann sehen Sie, dass im <button>-Tagdata-target="#myModal" ist das Ziel des Modaldialogs, das Sie auf der Seite laden möchten. Sie können mehrere Modaldialoge auf der Seite erstellen und für jeden Modaldialog verschiedene Trigger erstellen. Es ist klar, dass Sie mehrere Module gleichzeitig nicht laden können, aber Sie können mehrere Modaldialoge auf der Seite erstellen, die zu verschiedenen Zeiten geladen werden.
Es gibt zwei Punkte, die im Modaldialog beachtet werden müssen:
Erstens .modal, wird verwendet, um den Inhalt des <div> als Modaldialog zu erkennen.
Zweitens .fade Klasse. Wenn der Modaldialog umgeschaltet wird, wird sie das Einfügen und Ausblenden des Inhalts verursachen.
aria-labelledby="myModalLabel", dieses Attribut referenziert den Titel des Modaldialogs.
Attribut aria-hidden="true" wird verwendet, um den Modaldialog unsichtbar zu halten, bis der Trigger ausgelöst wird (z.B. durch Klicken auf einen Button).
<div>, modal-header ist die Klasse, die die Styles für den Kopf des Modaldialogs definiert.
class="close", close ist eine CSS-Klasse, um die Styles für den Schließknopf des Modaldialogs zu setzen.
data-dismiss="modal", ist eine benutzerdefinierte HTML5 data-Attribut. Hier wird es verwendet, um den Modaldialog zu schließen.
class="modal-body", ist eine CSS-Klasse in Bootstrap CSS, um die Styles für den Hauptbereich des Modaldialogs zu setzen.
class="modal-footer", ist eine CSS-Klasse in Bootstrap CSS, um die Styles für den unteren Bereich des Modaldialogs zu setzen.
data-toggle="modal", HTML5 Individuelle data-Attribut data-toggle wird verwendet, um den Modaldialog zu öffnen.

Option

Es gibt einige Optionen, um das Erscheinungsbild und die Wahrnehmung des Modaldialogs (Modal Window) zu gestalten, die über das data-Attribut oder JavaScript übermittelt werden. Nachstehend ist eine Tabelle mit diesen Optionen aufgeführt:

Optionname	Typ/Standardwert	Data-Attributname	Beschreibung
backdrop	boolean oder string 'static' Standardwert: true	data-backdrop	Gib einen statischen Hintergrund an, wenn der Benutzer auf das externe Modalfenster klickt, wird das Modalfenster nicht geschlossen.
keyboard	boolean Standardwert: true	data-keyboard	Schließe das Modalfenster, wenn die Escape-Taste gedrückt wird, wenn auf false gesetzt, ist die Taste无效.
show	boolean Standardwert: true	data-show	Zeige das Modalfenster bei der Initialisierung an.
remote	pfad Standardwert: false	data-remote	Mit jQuery .load Methode, um Inhalt in den Hauptteil des Modalfensters einzufügen. Wenn ein mit gültiger URL versehenes href hinzugefügt wird, wird der Inhalt darin geladen. Wie im folgenden Beispiel gezeigt: <a data-toggle="modal" href="remote.html" data-target="#modal">Klicken Sie auf mich</a>

Methode

Nachfolgend einige nützliche Methoden, die mit modal() verwendet werden können.

Methode	Beschreibung	Beispiel
Optionen: .modal(options)	Den Inhalt als aktivierte Modalauswahl verwenden. Akzeptiert ein optionales Optionsobjekt.	$('#identifier').modal({ keyboard: false }
Umschalten: .modal('toggle')	Manuell das Modalfenster umschalten.	$('#identifier').modal('toggle')
Anzeigen: .modal('show')	Manuell das Modalfenster öffnen.	$('#identifier').modal('show')
Verbergen: .modal('hide')	Manuell das Modalfenster ausblenden.	$('#identifier').modal('hide')

Online-Beispiel

Nachfolgender Beispiel zeigt die Verwendung der Methode:

Online-Beispiel

Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Modalauswahl (Modal) Plugin-Methode</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2Modalauswahl (Modal) Plugin-Methode</h2>
<!--　Schaltfläche löst das Modal aus　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Beginnen Sie mit der Demonstration des Modals
</button>
<!--　Modal-Box (Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"　
						aria-hidden="true">×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					Modal-Box (Modal) Titel
				</h4>
			</div>
			<div class="modal-body">
				Drücken Sie die ESC-Taste, um auszusteigen.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">Schließen
				</button>
				<button type="button" class="btn btn-primary">
					Änderungen übernehmen
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal-dialog　-->
</div><!--　/.modal　-->
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis ist wie folgt gezeigt:

Es genügt, die ESC-Taste zu drücken, um das Modal zu schließen.

Ereignis

Die folgende Tabelle listet die Ereignisse auf, die im Modal verwendet werden. Diese Ereignisse können als Hooks in der Funktion verwendet werden.

Ereignis	Beschreibung	Beispiel
show.bs.modal	Wird ausgelöst, nachdem die show-Methode aufgerufen wurde.	$('#identifier').on('show.bs.modal', function () { 　　//　Führen Sie einige Aktionen aus... }
shown.bs.modal	Wird ausgelöst, wenn das Modal für den Benutzer sichtbar wird (warten auf Abschluss der CSS-Übergangseffekte).	$('#identifier').on('shown.bs.modal', function () { 　　//　Führen Sie einige Aktionen aus... }
hide.bs.modal	Wird ausgelöst, wenn der hide-Beispielaufruf aufgerufen wird.	$('#identifier').on('hide.bs.modal', function () { 　　//　Führen Sie einige Aktionen aus... }
hidden.bs.modal	Wird ausgelöst, wenn das Modalfenster vollständig für den Benutzer ausgeblendet ist.	$('#identifier').on('hidden.bs.modal', function () { 　　//　Führen Sie einige Aktionen aus... }

Online-Beispiel

Das folgende Beispiel zeigt die Verwendung von Ereignissen:

Das Ergebnis ist wie folgt gezeigt:

Wie im obigen Beispiel gezeigt, wenn Sie auf schließen Schaltfläche, das ist verstecken Ereignis, wird eine Warnmeldung angezeigt.

Bootstrap-Dropdown-Menü-Plugin Bootstrap-Übergangseffekt-Plugin