jQuery-Dialog

Im heutigen Beitrag lernen wir dialog und seine verschiedenen Optionen in jQuery kennen.

Dialog in jQuery

Das grundlegende Dialogfeld ist eine Überlagerung, die innerhalb des Ansichtsfensters platziert und von Seiteninhalten (z. B. ausgewählten Elementen) abgeschirmt wird, die durch einen IFrame angezeigt werden. Es hat eine Titel-Leiste und einen Inhaltsbereich und kann standardmäßig mit dem x-Symbol verschoben, in der Größe geändert und geschlossen werden.

Eine Bildlaufleiste wird automatisch angezeigt, wenn die Inhaltslänge die maximale Höhe überschreitet.

Wir können Optionen wie eine untere Schaltflächenleiste und eine halbtransparente modale Überlagerungsebene hinzufügen. Einige Optionen, die mit dialog verwendet werden können, sind unten aufgeführt.

1. autoOpen – ein boolescher Wert; ist dieser Wert auf true gesetzt, wird der Dialog bei der Initialisierung automatisch geöffnet. Bei false bleibt der Dialog verborgen, bis die Methode open() aufgerufen wird.

2. closeOnEscape – ein boolescher Wert, der angibt, ob das Dialogfeld geschlossen werden soll, wenn es fokussiert ist und der Benutzer die Esc-Taste drückt.

3. closeText – ein Zeichenfolgenwert, der den Text für die Schließen-Schaltfläche angibt. Bei Verwendung eines Standarddesigns wird der Schlusstext sichtbar ausgeblendet.

4. draggable – ein boolescher Wert; wenn auf true gesetzt, kann der Dialog aus der Titel-Leiste gezogen werden. Dazu muss das dragable-Widget der jQuery-UI importiert werden.

5. modal – ein boolescher Wert. Wenn auf true gesetzt, verhält sich der Dialog modal.

   Andere Seitenelemente sind deaktiviert, d. h. Sie können nicht interagieren. Modale Dialoge erstellen eine Überlagerung unter dem Dialog; jedoch über verschiedene Elemente auf der Webseite.

Weitere Informationen finden Sie in der Dokumentation zu dialog.

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

Die beiden obigen Zeilen müssen vor der Implementierung des Dialogs importiert werden. Es ist eine Bibliothek eines Drittanbieters, die Dialogfunktionen bereitstellt.

Wenn es nicht importiert wird, wird ein Fehler dialog is not a function ausgegeben.

<button id="delf">Open Dialog</button>
<div id="delftstack" title="Welcome to Delftstack">
  Welcome to Delftstack
</div>

$(function() {
  $('#delftstack').dialog({
    autoOpen: false,
  });
  $('#delf').click(function() {
    $('#delftstack').dialog('open');
  });
});

Demo

Im obigen Beispiel haben wir die Schaltfläche definiert, die einen Dialog öffnet. Standardmäßig wird ein Dialog geschlossen.

Sobald Sie auf die Schaltfläche klicken, löst der Dialog die Methode Öffnen aus, die auf dem Bildschirm sichtbar ist.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Dieses Ergebnis wird angezeigt.