10 kostenlose JavaScript-Plugins für modale Fenster

Sie können finden viele reine CSS-Modale aber diese Bieten Sie nicht das gleiche Steuerelement wie JavaScript an. Mit einem JavaScript-Modal können Sie benutzerdefinierte Animationen und UI-Eingaben hinzufügen und die Benutzererfahrung wirklich verbessern.

Aber warum etwas von Grund auf neu gestalten Sie können eine JS-Bibliothek verwenden? Ich habe die gesammelt beste kostenlose JavaScript-betriebene modale Skripte hier für Sie, um Ihre Lieblinge durchzulesen und herauszufinden.

All das sind völlig frei und Open-Source, So können Sie den Code bearbeiten und nach Bedarf an Ihre Website anpassen.

1. Prickeln

Eines meiner beliebtesten kostenlosen modalen Skripte ist Tingle.js. Es ist baut auf Vanille-JavaScript ohne Abhängigkeiten auf, Sie benötigen also keine jQuery- oder Zepto-Bibliotheken.

Plus, es ist eine ziemlich kleine Bibliothek, obwohl es eine hat viele Optionen zur Anpassung. Sie können die CSS-Übergänge, die JavaScript-Modalanimationen und die gesamte Benutzererfahrung mit nur wenigen Einstellungen ändern.

Tingle.js soll sein voll zugänglich und ansprechbar, Es funktioniert also auf mobilen Geräten und unterstützt auch ältere Browser.

Du kannst sehen die gesamte Dokumentation zu GitHub, zusammen mit dem kostenlosen Quellcode. Sie haben auch einen Demo-Link, also können Sie Schau dir Tingle in Aktion an um zu sehen, ob es auf Ihre Website passt.

2. Vanille Modal

Hier ist ein Modal, das ich kürzlich gefunden habe und es ist viel einfacher als die meisten. Vanille Modal steht ihrem Namen mit einem reines Vanilleskript das Modal mit Strom versorgen CSS-Übergänge.

Das Ding ist ziemlich klein und super flexibel, mit benutzerdefiniertes CSS, um die Fenster neu zu gestalten. Es hat auch Einige Optionen können Sie mit JavaScript ändern, Damit ist es perfekt für die Ausführung von DOM-Funktionen oder sogar für Rückruffunktionen.

Werfen Sie einen Blick auf die Demo-Seite um den Standardstil zu sehen. Es ist ein wirklich grundlegendes Design Sie benötigen Anpassungen, um sie an einem Produktionsstandort zu verwenden. Dies reduziert jedoch auch die gesamten Codeanforderungen eine der flachsten JavaScript-Modalbibliotheken.

3. plainModal

Wenn Sie ein wirklich einfaches Skript wünschen, empfehle ich es sehr plainModal. Es ist auf jQuery gebaut, aber es ist eines der kleinsten verfügbaren Modalskripte.

Es tut Verwenden Sie keine externen CSS- oder Bilddateien. Sie benötigen nur ein einziges JS-Skript.

Sobald das plainModal-Skript zu Ihrer Seite hinzugefügt wurde, klicken Sie einfach auf Richten Sie die modale Schaltfläche aus und du bist gut zu gehen. Damit haben Sie die Kontrolle über die Anzeige und wie sehr Sie die modale Benutzeroberfläche ändern möchten.

Plus kannst du Richten Sie das Modal mit einer JavaScript-Zeile ein mit dem minimalistischen Thema dieses Plugins.

4. Modaal

Es gibt kein Leugnen Die Zugänglichkeit im Web ist enorm. Das Ziel jedes Designers sollte ein sein Inklusivere Erfahrung für Menschen auf der ganzen Welt auf verschiedenen Geräten und mit möglichen Einschränkungen.

Mit Modaal, Du bekommst die perfekte Erfahrung welche besteht den WCAG 2.0-Test mit einer guten AA-Barrierefreiheit. Auf der Hauptseite können Sie ein fantastisches Beispiel mit Code-Dokumentation sehen.

Insgesamt empfehle ich dieses Vanilla JavaScript Plugin für alle, die sich wirklich für die Zugänglichkeit interessieren. Die AA-Bewertung kann für einige Webprojekte erforderlich sein. Modaal ist daher ein sehr praktisches Skript, um Lesezeichen zu halten.

5. Scotch JS Modal

Das Entwicklungsteam von Scotch.io veröffentlicht Tutorials und Leitfäden für Programmierer. Ihre Arbeit ist unglaublich und zeigt sich wirklich in Dieses JavaScript-Modalskript, das auf dem schottischen GitHub gehostet wird.

Das Modal wurde von Ken Wheeler entwickelt und dieses Skript sogar hat ein vollständiges Tutorial Wenn Sie wissen wollen, wie es funktioniert. Der kostenlose Code sollte jedoch für die meisten Entwickler ausreichen, da dies der Fall ist super leicht und einfach einzurichten. Keine Abhängigkeiten und sogar eine Beispieldemo von CodePen.

6. Bootbox.js

Der schnellste Weg nach ein neues Webprojekt starten ist durch Bootstrap. Es ist ein leistungsfähiges Frontend-Framework, das Entwickler dazu ermutigt Erstellen Sie eigene Add-Ons für die Bibliothek.

Ein solches Beispiel ist Bootbox.js, eine kleine JavaScript-Bibliothek, Nur für modale Fenster in Bootstrap konzipiert. Es eigentlich funktioniert in Dialogfeldern Hier kann der Benutzer je nach Anforderung auf OK klicken oder den Vorgang abbrechen.

Typische JavaScript-Dialoge sind genauso schrecklich wie Warnmeldungen. Das Bootbox-Skript bietet a Eine solide Alternative für alle, die im BS3 / BS4-Ökosystem arbeiten.

Wieder ist es völlig kostenlos und Open-Source, zusammen mit einem lange Dokumentationsseite Damit Sie schnell loslegen können.

7. iziModal.js

Wenn du brauche eine etwas individuellere Lösung Auschecken iziModal.js. Dieses Tool ist voll ansprechend und entworfen zu funktionieren in allen modernen Browsern perfekt.

Ich habe noch ein anderes modales Skript gefunden, das ein solch ästhetisch ansprechendes Design bietet. Es kommt mit einem aus dem Tor wunderschöne Benutzeroberfläche, die in praktisch jede Website integriert werden kann. Sie können jedoch Auch das Design neu gestalten Ihren Bedürfnissen anpassen.

Notieren Sie sich dieses Plugin läuft auf jQuery, also ist es einer der wenigen hier hat eine Abhängigkeit. Wenn Sie jedoch die iziModal-Stile wünschen, ist dies ein kleiner Preis, der für solche schlanken Popover-Fenster zu zahlen ist.

8. jQuery Modal

Das jQuery Modal Plugin ist vielleicht das einfachstes modales Skript auf jQuery, das Sie jemals finden werden.

Es kann programmiert werden wird automatisch mit bestimmten HTML-Elementen verbunden basierend auf verschiedenen Attributen. Es auch unterstützt Tastenkombinationen wie ESC zum Schließen des Fensters.

Insgesamt dieses Plugin misst weniger als 1 KB und es funktioniert in jedem möglichen Browser, den Sie sich vorstellen können. jQuery-Entwickler sollten dieses Plugin für den schnellen Zugriff auf ein einfaches modales Skript ohne zusätzlichen Aufwand aufbewahren.

9. PicoModal

Zurück in Richtung Vanilla JavaScript haben wir die PicoModal-Bibliothek. Dies ist wahrscheinlich eines der kleinsten Skripts, die Sie finden können laufen perfekt auf einem Vanille-JavaScript-Backbone.

Es unterstützt alle modernen Browser, einschließlich mobiler Browser für Android und Mobile Safari für iOS. Es unterstützt sogar ältere IE-Browser, die auf IE7 zurückgehen!

PicoModals Entwickler ein kleines JSfiddle-Skript erstellt um zu zeigen, wie es funktioniert. Dies ist ein sehr kleines Beispiel nicht an ein Klickereignis oder etwas anderes gebunden, aber es ist nicht schwer Skript in ein paar Toggle-Buttons um dieses modale Fenster richtig auszuführen.

10. Avgrund

Avgrund ist wahrscheinlich eine der einzigartigsten Modalen in dieser Liste. Es verwendet eine Benutzerdefinierter Seitenausblendeffekt zusammen mit einer schrumpfenden Animation um das modale Recht sichtbar zu machen.

Nicht jeder wird diese Animation zu schätzen wissen, daher kann ich nicht sagen, dass dieses Skript auf jede Website passen würde. Aber es ist ein Vanille-Modal pur und es ist super einfach einzurichten, mit nur einem CSS- und einem JavaScript-Filee.

Schauen Sie sich das an Demo-Seite um zu sehen wie es läuft. Es hat sicherlich einen einzigartigen Stil und ist die Aufmerksamkeit auf sich ziehen mit den benutzerdefinierten Animationen, die einfach funktionieren.

Letzte Worte

Egal was Sie suchen, ich wette, es gibt etwas in dieser Liste, das Ihren Bedürfnissen entspricht. Aber wenn Sie immer noch nicht zufrieden sind Durchsuchen Sie GitHub nach verwandten modalen Skripten und sehen, was Sie sonst noch finden können.