English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Grund教程

Bootstrap4 Modalfenster

Modal ist im Grunde ein Dialog oder ein Pop-up-Fenster, das dem Benutzer wichtige Informationen oder eine Aufforderung anzeigt, notwendige Maßnahmen vor der Fortsetzung zu ergreifen. Modale werden weit verbreitet verwendet, um Benutzer zu warnen, dass ihre Sitzung abgelaufen ist, oder um ihre endgültige Bestätigung vor dem Ausführen jeder kritischen Aktion (z.B. Speichern oder Löschen wichtiger Daten) zu erhalten.

Mit dem Bootstrap-Modal-Plugin können Sie leicht sehr intelligente und flexible Dialoge erstellen.

Modaldialogfeld (Modal) ist ein über dem Elternfenster liegendes Untefenster. Normalerweise ist das Ziel, Inhalte aus einer separaten Quelle anzuzeigen, die ohne das Verlassen des Elternfensters interaktiv sein können. Das Untefenster kann Informationen und Interaktionen bereitstellen.

Wie erstellt man ein Modaldialogfeld

Der folgende Beispiel gibt eine kurze Übersicht über die grundlegende Struktur eines einfachen Modals mit Titel, Nachrichteninhalt und Fußzeile mit Benutzeraktionsschaltflächen. Der folgende Beispiel erstellt eine einfache Modaldialogfeldeffekt:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Modaldialogfeldbeispiel</h2>
　　!--　Schaltfläche: zum Öffnen des Modaldialogfelds　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Öffnen Sie das Modaldialogfeld
　　</button>
　　　
　　!--　Modalfenster　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Kopf des Modals　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Kopf des Modals</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Hauptteil des Modals　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Inhalt des Modals...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Unterbereich des Modals　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Schließen</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Modaldialogfeldgröße

Wir können die Klasse .modal hinzufügen-sm Klasse erstellt werden, .modal-lg-Klasse kann ein großes Modaldialogfeld erstellt werden.

Größenklassen werden im-Nach dem Hinzufügen der Klasse

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Modaldialogfeldbeispiel</h2>
　　!--　Schaltfläche: zum Öffnen des Modaldialogfelds　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Öffnen Sie das Modaldialogfeld
　　</button>
　　　
　　!--　Modalfenster　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog modal-sm">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Kopf des Modals　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Kopf des Modals</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Hauptteil des Modals　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Inhalt des Modals...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Unterbereich des Modals　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Schließen</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Modaldialogfeldbeispiel</h2>
　　!--　Schaltfläche: zum Öffnen des Modaldialogfelds　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Öffnen Sie das Modaldialogfeld
　　</button>
　　　
　　!--　Modalfenster　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog modal-lg">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Kopf des Modals　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Kopf des Modals</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Hauptteil des Modals　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Inhalt des Modals...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Unterbereich des Modals　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Schließen</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Bootstrap4 HinweisfensterBootstrap4 Slideshow