Modales Fenster von JQuery - wozu dient es und wie wird es installiert?

Inhaltsverzeichnis:

Modales Fenster von JQuery - wozu dient es und wie wird es installiert?
Modales Fenster von JQuery - wozu dient es und wie wird es installiert?
Anonim

Um die Antwort auf Ihre Frage zu finden, müssen Sie manchmal viel Zeit aufwenden, insbesondere wenn sich eine Person, die sich mit Webdesign nicht besonders auskennt, entschlossen hat, eine Website zu erstellen selbstständig. Ein modales JQuery-Fenster kann eine solche quälende Aufgabe sein.

Im Internet finden Sie viele solcher Fenster. Es scheint, dass Sie sie nur kopieren und auf Ihrer Website einfügen müssen … Allerdings ist nicht alles so einfach. Wie es der Zufall will, gibt es ein Detail, das alles verlangsamt, und es ist unmöglich, die Aufgabe zu lösen, weil dafür kein Wissen erforderlich ist. Anstatt also sofort ein modales Fenster auf jQuery mit vielen interessanten Funktionen zu schikanieren, die schwer zu implementieren sind, ist es besser, mit einem kleinen, einfachsten modalen Fenster ohne unnötige Probleme zu beginnen.

Wenn es irgendwo auf WordPress einen Blog gibt, dann ist alles sehr einfach, und normalerweise gibt es keine Schwierigkeiten, da es bereits viele fertige Lösungen gibt - verschiedene Popup-Module. Es gibt aber auch ganz andere Möglichkeiten, bei denen Sie selbst ein modales Fenster „formen“oder sich an kostenpflichtige Dienste von Spezialisten wenden müssen. Wie Sie wissen, möchte niemand bezahlen, besonders wenn es so aussieht, als müssten Sie der Sache nur auf den Grund gehen, und alles wird sich ziemlich schnell und schnell herausstellenvöllig kostenlos.

Ein modales Jquery-Fenster wird benötigt, um Inh alte anzuzeigen, die mit den Informationen auf der Seite einhergehen und diese ergänzen.

jQuery - was ist das?

Für ein vollständiges Verständnis, falls jemand es nicht weiß, dann ist jquery eine JavaScript-Bibliothek, und letzteres wiederum bedeutet ein Stück Code, das in den Code einer Webseite eingebettet ist und es Ihnen ermöglicht, zu erreichen verschiedene Effekte, die nicht in HTML und CSS implementiert werden können. Ein typisches Beispiel für einen solchen Code wäre das aktuelle Datum oder die Uhrzeit, die auf der Seite angezeigt wird.

Die Entwickler der Bibliothek haben eine offizielle Website, die ständig verbessert und aktualisiert wird, in Verbindung mit der es alle neuen Versionen gibt, die neue Bibliotheken anbieten.

Um jquery mitzuteilen, dass Sie diesen oder jenen Effekt benötigen, gibt es eine CSS-Sprache mit Stylesheets.

CSS-Sprache

CSS bedeutet Cascading Style Sheets. Es ist jetzt unmöglich, eine Seite im Internet zu finden, die diese Sprache nicht verwendet.

Daher sind jquery und CSS in modalen Fenstern fast unverzichtbar und unverzichtbar. Wenn jquery nicht enth alten ist, müssen Sie dies daher tun.

Dazu wird innerhalb des Head-Tags Folgendes eingefügt:

jQuery
jQuery

Wofür sind Modale?

Ein einfaches Jquery-Modal, das beim Laden der Website angezeigt wird, kann nützlich sein, um mehr Follower zu gewinnen. Das Fenster wird angezeigt, wenn die Seite geöffnet wird. Es lenkt nicht sehr ab und wird wahrscheinlich niemanden erschrecken, da es bei der geringsten Unannehmlichkeit leicht zu erschrecken istschließt, und die Schließen-Sch altfläche enthält Cookies, und wenn Sie darauf klicken, wird das verschwundene modale Fenster nicht wieder angezeigt.

Popup-Fenster

Ein Jquery-Popup-Fenster, das nur einmal pro Seite erscheint, ist eine Variation von modalen Fenstern.

Zur Umsetzung müssen einige Schritte unternommen werden.

Du kannst spezielle Plugins für modale Fenster verwenden. Es ist am besten, sie von Entwicklerseiten wie arcticModal herunterzuladen. Es verbindet sich wie folgt:

Modales jQuery-Fenster
Modales jQuery-Fenster

Ohne Fenstergest altung sieht eines der Standard-Plugin-Designs so aus:

jQuery einfaches modales Fenster
jQuery einfaches modales Fenster

Als nächstes wird das Cookie-Plugin verbunden:

Modales jQuery-Fenster
Modales jQuery-Fenster

Schreiben von HTML-Code, der Informationen für den Benutzer bereitstellt:

Modales jQuery-Fenster
Modales jQuery-Fenster

Die im Code angegebene arctimonial-close-Klasse bedeutet, dass das modale jQuery-Fenster damit geschlossen wird.

Als nächstes kommt das letzte Skript:

Modales jQuery-Popup
Modales jQuery-Popup

Einige der verwendeten Parameter haben folgende Bedeutung:

closeOnOverClick: Bestimmt, ob das Fenster geschlossen wird, wenn auf das Overlay geklickt wird.

CloseOn Esc: bedeutet Klicken auf Esc.

Expires: Gibt die Zeit an, für die das Cookie gespeichert wird. In der vorgeschlagenen Version beträgt diese Zeit sechzig Tage, dh das Fenster wird zwei Monate lang nicht angezeigt. Das Cookie wird bei jedem Besuch aktualisiert.

Lernen, wie man auf Ihrem installiertjQuery-Modalfenster auf der Website können Sie bei Bedarf zu komplexeren Optionen übergehen. Dazu werden eine Vielzahl von CSS-Stilen hinzugefügt, und das Fenster unterscheidet sich vollständig von modalen Fenstern auf anderen Websites.

Fantasie und Vorstellungskraft helfen dank solcher Lösungen, die Zahl der Abonnenten deutlich zu steigern, und geschickt eingesetzte Modalfenster in Online-Shops können den Umsatz um ein Vielfaches steigern. Der Zeitaufwand für das Programmieren und Installieren von Windows ist also gerechtfertigt und zahlt sich auf jeden Fall aus!

Arten von modalen Fenstern

Modale Fenster können Popup-Fenster sein, wenn Sie auf die entsprechende Sch altfläche klicken, oder zusammen mit der Seite geladen werden und erscheinen sofort nach dem Laden. Sie können wie im oben beschriebenen Beispiel beim Schließen für einige Zeit nicht mehr erscheinen, wenn ein Cookie gesetzt wird, oder sie können bei jedem Laden der Seite erscheinen. Es gibt modale Fenster, die an einer Stelle fixiert sind und trotz Bewegungen auf der Seite dort bleiben und dynamisch sein können, wenn das Fenster Informationen mit einem Link enthält und der Benutzer es durchläuft. Dann wird nur das Fenster aktualisiert, während die Originalseite unverändert bleibt.

Empfohlen: