Ein Modal ist ein Fenster, das vom Hauptfenster einer Webseite getrennt ist. Sein Hauptzweck besteht darin, das Hauptfenster fur die Benutzerinteraktion zu deaktivieren und Informationen mit dem Benutzer zu teilen oder etwas zu best√§tigen. Modale Fenster werden gerne als Anmeldekomponenten, zur Best√§tigung von Benutzereingaben oder fur eine Vielzahl anderer Anwendungen verwendet.
Bootstrap ist ein Framework, mit dem wir Komponenten superschnell erstellen können. In diesem Artikel erfahren Sie, wie Sie Bootstrap einrichten, erfahren, warum wir möglicherweise ein Modal benötigen, und werfen einen Blick auf einige Beispiele fur Modal in Aktion mit dem Bootstrap-Framework.
Erste Schritte
Um sicherzustellen, dass wir ein Modal auf unserer Webseite anzeigen können, stellen Sie sicher, dass die richtigen Abhängigkeiten vorhanden sind. Fur dieses Projekt benötigen wir Bootstrap, Popper.JS und jQuery. Navigieren Sie zur Bootstrap-Schnellstartseite, um Hilfe bei alle Ihre Abhängigkeiten zu erhalten.
Es liegt an Ihnen, die benötigten Pakete zu verknupfen, aber der einfachste und anfängerfreundlichste Weg ist die Verwendung des Content Delivery Network – das CDN – fur jQuery, Popper.js und Bootstrap. Achten Sie auf die Reihenfolge Ihres
Wann ein Modal verwendet werden sollte
Modals eignen sich hervorragend fur webbasierte Anwendungen, die ab und zu die Aufmerksamkeit eines Benutzers auf sich ziehen mussen.< br>
Wenn Sie sich beispielsweise auf der Website Ihrer Bank anmelden, navigieren Sie zu einer anderen Registerkarte und kehren Sie dann zur ersten Website zuruck wegen Inaktivität abgemeldet werden. Das Erkennen von Inaktivität ist ein Paradebeispiel dafur, wann ein Modal benötigt wird. Die Einrichtung der Bank erlaubt keine weitere Interaktion auf der Website, bis der Benutzer die Entscheidung getroffen hat, weiterhin eingeloggt zu bleiben oder sich abzumelden.
Aus Sicht der Entwicklung helfen Modal dabei, die die Website vom Aktualisieren auf eine neue Seite ab, wenn sie nicht unbedingt ben√∂tigt wird. Eine beliebige Anzahl von Shopping-Einzelh√§ndlern nutzt dies, um eine ‚ÄûSchnellansicht‚" fur ihre Benutzer, damit der Benutzer nicht nur schneller auf ihrer Website navigieren, sondern auch schneller einkaufen kann. Schnellansichten erfordern kein Neuladen der gesamten Seite, um die Informationen zu einem Element abzurufen.
Wenn ein Benutzer w√§hrend der Interaktion mit einem Modal auf den Inhalt des Hauptbildschirms zugreifen muss, greifen Sie zu einem anderen UI-Element stattdessen zu verwenden. Der Sinn eines Modals besteht darin, die Interaktion mit dem Hauptfenster wegzunehmen und dem Modal die Kontrolle zu geben.