Informationen zur Verwendung des jquery.edbox-Plug-Ins

jquery.edbox.js ist ein leichtes, auf JQuery reagierendes modales Fenster-Plug-in. Mit diesem Plug-in für modale JQuery-Fenster können Sie ganz einfach reaktionsfähige, animierte und AJAX-basierte modale Dialogeffekte erstellen.

Zu seinen Funktionen gehören:

Sie können den Stil des modalen Fensters über CSS ändern.

Sie können den Inhalt der Kopf- und Fußzeile des modalen Fensters anpassen.

Sie können den Ladeeffekt anpassen.

Unterstützt Inhalte in mehreren Formaten: HTML, Text, Bilder und AJAX-Inhalte usw.

Unterstützt 4 Alarmszenariomodi: Erfolg, Info, Warnung und Gefahr.

Anpassbare Animation zum Öffnen und Schließen modaler Fenster.

Rückrufmethoden unterstützen.

Installation

Sie können das jquery.edbox.js-Plug-in über npm oder Yarn installieren.

npm install jquery.edbox

yarn add jquery.edbox                                                                     Stellen Sie die. edbox vor .css-Datei, jquery- und jquery.edbox.js-Dateien.

HTML-Struktur

Die einfachste Möglichkeit, ein modales Fenster zu verwenden, ist die Verwendung eines

als modales Fenster A Inhaltscontainer, in dem HTML, Text, Bilder, AJAX-Inhalte usw. platziert werden können.

<link href="dist/edbox.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.edbox.js"></script>

Dann lösen Sie das modale Fenster über einen Hyperlink oder eine Schaltfläche aus.

Initialisierungs-Plug-in

<p id="target">模态窗口内容</p>

<ahref="#"edbox data-box-target="#target">打开模态窗口</a>

Nachdem das Seiten-DOM-Element geladen wurde, initialisieren Sie das Modul über edbox() ; Methodenstatusfenster-Plugin.

HTML-, Bilder- und AJAX-Inhalte in das modale Fenster laden

Die Methode zum Laden von HTML-Inhalten in das modale Fenster ist wie folgt folgt: Geben Sie einfach Ihren HTML-Inhalt in das data-box-html-Attribut ein.

$('.trigger-link').edbox();

Die Methode zum Hinzufügen von Bildern ist wie folgt:

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>

Die Methode zum Hinzufügen von AJAX-Inhalten ist wie folgt:

$('.trigger-link').edbox();

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>

$('.link-image').edbox({
  image: 'curitiba-brazil.jpg'
});

Methoden

<!-- 使用 href 或者 data-box-url 属性 -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>

Die verfügbaren Methoden des modalen Fenster-Plug-ins jquery.edbox.js sind:

$('.link-url').edbox({
  //add an extra class to the modal for an especific style
  addClass: 'example-url',
  width: 900
});

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung des jquery.edbox-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!