Change language
Python.Engineering Wiki Modales Css-Javascript

Modales Css-Javascript

__del__ | __main__ Python module | ast Python module | Bootstrap JavaScript library | code Python module | COM PHP module | copy Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | jQuery JavaScript library | keyword Python module | Network PHP module | os Python module | PS PHP module | Python functions | re Python module | sep | StackOverflow | Sync PHP module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

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 Tags – Hier kommt es auf die Reihenfolge an.

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.

Verwenden Sie Bootstrap zum Erstellen eines Modals

Modals werden traditionell mit HTML, CSS und JavaScript erstellt. Alle diese Sprachen sind fur die Erstellung des Modals wichtig, aber JavaScript ist zwingend erforderlich, um Modalwerte zu erhalten JavaScript ist der Schalter, der das Modal ein- oder ausschaltet.

Wenn Sie Bootstrap verwenden, ist es gut, die Dokumentation zur Hand zu haben, damit Sie das Modal richtig kopieren und einfugen können Während Sie lernen, Bootstrap zu verwenden und wie diese Komponenten funktionieren, empfehle ich, den Code zu kopieren/einzufugen und dann zu kommentieren, damit Sie wissen oder herausfinden können, was jede Codezeile tut.

Da wir hier das Rad nicht neu erfinden, indem wir den modalen Code von Bootstrap verwenden, ist es wichtig zu wissen, wie es funktioniert, damit Sie es einer anderen Person erklären können. Es lohnt sich nicht, etwas zu kopieren und einzufugen, wenn Sie es möchten ;bist nicht kann erklären, warum es funktioniert.

Modal mit einem Knopf starten

Dieser Code stammt direkt aus der Bootstrap-Dokumentation zum Erstellen eines Modal mithilfe ihres Frameworks. Der Rest des Artikels wird darauf verwendet, den Code durchzugehen, damit wir sicher sein können, was das Markup bedeutet. In diesem Abschnitt behandeln wir hauptsächlich Attribute.

Wir wissen, was Klasse in Bezug auf CSS bedeutet. Hier ist es nicht anders. Die aufgefuhrten Klassen entsprechen dem Bootstrap-Stylesheet, auf das wir im Kopf des HTML-Dokuments verwiesen haben.

Das "btn‚" Klasse steuert den gr√∂√üten Teil des Designs der Schaltfl√§che; die Farbe wird durch den zweiten Klassennamen gesteuert. Versuchen Sie, "btn-primary‚" zu einer anderen g√§ngigen Schaltfl√§chenfarbe (z. B. btn-sekund√§r oder btn-danger), um zu sehen, was passiert.

Dieses Attribut entspricht dem data-dismiss-Attribut, das Teil der Schaltfläche innerhalb der . ist modal.

Das data-target-Attribut zielt auf den Codeblock ab, der die ID exampleModal hat. Das exampleModal ist unser eigentlicher modaler Inhalt. Es holt sich die Informationen aus dem identifizierten Block.

Dies ist besonders wichtig, wenn mehrere Modals auf derselben Seite vorhanden sind. Sie möchten das data-target-Attribut und die ID so ändern, dass jeweils nur ein Modal geöffnet wird.

Ereignishandler werden alle von Bootstrap mit jQuery und Popper.js verwaltet. Sie mussen sich keine Gedanken daruber machen, was zu tun ist, wenn ein Benutzer klickt, da dies bereits verarbeitet wurde! Um sicherzustellen, dass es weiterhin funktioniert, ändern Sie keinen der ursprunglichen Klassennamen, da sie in unserem CSS so ausgewählt werden.

Modal-Hauptelement

Wie oben stammt dieser Code direkt aus der Dokumentation von Bootstrap. Der Zweck dieses Abschnitts besteht darin, das Markup durchzugehen, um sicher zu sein, was es bedeutet.

Das modale Hauptelement wird uber eine Schaltfläche auf der Hauptseite gestartet Klassennamen weisen hier darauf hin, dass wir zwei separate Selektoren fur unser Modal haben. Der erste zeigt die Stile fur das Modal selbst an. Der zweite zeigt an, dass dieses Element mit einer Ein- und Ausblendtechnik ubergeht.

Wir haben das id-Attribut schon einmal gesehen. So zielen wir auf ein Element ab, um den Stil zu √§ndern. In diesem Fall ist es auch das Ziel der Startschaltfl√§che auf der Hauptseite. Es entspricht dem "Datenziel‚" Attribut.

Der Tabindex zeigt normalerweise an, dass das Element uber die Tastatur erreichbar ist. Dies ist nicht der Fall, wenn die Zahl negativ ist. Es wird mithilfe von JavaScript und/oder einem Klickereignis fokussiert.

Die aria-Attribute sind einfach und beziehen sich auf die Zugänglichkeit. Das Attribut labelledby aria ist normalerweise mit dieser Modal-Titel-ID verknupft. Der wahre Wert des versteckten Attributs zeigt an, dass es von Screenreadern nicht gesehen wird.

Erstellen Sie Ihr eigenes modales Element mit Bootstrap Starter

Sie können Bootstrap auf eigene Faust gestalten’ s modal, indem Sie die Stile ändern. Die kaskadierende Natur von CSS ist immer noch uberragend, so dass das Überschreiben des CSS erfolgen kann, indem eine neue Klasse erstellt und diese durch ein Leerzeichen getrennt an den Klassennamen angehängt wird, oder indem ein Klassenname mit dem wichtigen Schlusselwort uberschrieben wird. Letzteres sollte nur in extremen Fällen verwendet werden. Am häufigsten werden Änderungen mit einem benutzerdefinierten Klassennamen vorgenommen.

Im obigen Code-Editor haben wir CSS verwendet, um den Stil der Schaltflächen und den Hintergrund des Modal zu ändern. In diesem Beispiel habe ich einen benutzerdefinierten Klassennamen hinzugefugt, anstatt zu versuchen, das CSS, das Bootstrap bereits bereitstellt, mit dem Schlusselwort !important zu uberschreiben.

Schlussfolgerung

Die Haupthurde beim Erstellen eines Modals mit Bootstrap besteht darin, sicherzustellen, dass die Dokumentation korrekt erstellt wurde. Wenn ein Fehler auftritt, liegt es sehr wahrscheinlich daran zu einem Kopier-/Einfugefehler, einem Positionsfehler des CDN oder Stylesheets im Kopf/Text Ihres HTML-Codes oder dass Ihr CSS nicht auf das richtige Element ausgerichtet ist.

Einige dieser benutzerdefinierten Formatierungen werden kommen mit Versuch und Irrtum. Das Tolle ist, dass die Dokumentation von Bootstrap sehr grundlich ist zu verstehen.