Erstellen Sie Modale mit reinem CSS mit CSS Modal

Im Webdesign müssen Sie eine gute Organisation des Inhalts haben. Dies hilft den Benutzern mehr lesbare und funktionale Informationen zu geben. Sie können dies tun, indem Sie ein ordentliches und ordentliches Layout auf der Website erstellen . Um den Inhalt zu organisieren, gibt es viele Oberflächenelemente und Strukturen, die Sie verwenden können, und der modale Dialog ist einer davon.

Wenn Sie einen modalen Dialog mit jQuery oder anderen Plugins erstellt haben, haben wir gute Neuigkeiten für Sie. Mit der CSS Modal- Bibliothek benötigen Sie nur reines CSS.

Hans Christian Reinl, der Entwickler von CSS Modal, hat viele Vorteile mit sich gebracht. Einige der Vorteile sind, dass es als SASS-Plugin verwendet werden kann, Cross-Browser-Unterstützung, es ist für Mobile optimiert, es kann mit Medien (Bild, Video und Sound) eingefügt werden, und es ist klein und schnell.

Fast alle modernen Browser unterstützen CSS Modal . Es wurde in Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 und Android getestet. Während es für Android 2.3 immer noch kleinere Probleme gibt (Scrollen ist zum Zeitpunkt des Schreibens das größte Problem), funktioniert es immer noch gut.

HTML-Markup

CSS Modal besteht aus drei Teilen: Header, Inhalt und Fußzeile . In der header können Sie den Titel für das Modal eingeben. Der Inhalt dient zum Anzeigen der wichtigen Informationen, die Sie hervorheben möchten. Dieser Teil unterstützt Text, Bilder und eingebetteten Code. Wie für die footer können Sie hier zusätzliche Informationen hinzufügen, z. B. eine Schaltfläche zum Schließen, eine Schaltfläche zum Öffnen eines neuen Fensters usw.

Um einen modalen Dialog zu erstellen, sollten Sie das section Tag und einige vordefinierte data-attributes, Klasse und ID verwenden. Innerhalb des section Tags muss ein Element enthalten sein, das mit der .modal-inner Klasse umschlossen ist. Hier ist das grundlegende Markup:

Die id im section Tag wird zum Aufrufen des Modals von einer anderen Funktion verwendet, z. B. durch einen Link, und der Wert kann nach Bedarf geändert werden. a Tag im Code wird als Schaltfläche zum Schließen des Modals verwendet. Das Attribut der href sollte wie oben gezeigt belassen werden, da es die Seite daran hindert nach oben zu scrollen wenn sie angeklickt wird.

Die header und footer sind optionale Teile, die Sie möglicherweise einschließen (oder nicht). Aber denken Sie daran, wenn Sie eine Kopfzeile verwenden, müssen Sie einen eindeutigen ID-Namen hinzufügen und das Attribut aria-labelledby auf den gleichen Wert ändern.

Vergessen Sie nicht, die CSS Modal- Bibliothek, die Sie von der GitHub-Seite herunterladen können, in Ihr Projekt aufzunehmen.

 ..  .. 

Zusätzliches Javascript

Wenn Sie CSS Modal mit reinem CSS verwenden, gibt es noch einige Probleme:

• Probleme mit IE 8-Kompatibilität
• Tastatur-Escape-Taste zum Beenden
• Scrolling-Hintergrundprävention
• Focus-Effekt auf das Modal und zurück auf die Seite nach dem Schließen

Um diese Probleme zu beheben, wird hier noch Javascript benötigt. Glücklicherweise hat CSS Modal Ihnen einen leichtgewichtigen Javascript-Quellcode für Ihre Bequemlichkeit zur Verfügung gestellt. Fügen Sie diesen Code vor dem schließenden body Tag ein.

Letzter Gedanke

Die Erstellung von Modal mit reinem CSS hat immer noch einige Nachteile, aber es kann ein alternatives Tool werden, um Ihre Website weiter zu bereichern. Und du willst wahrscheinlich etwas anderes ausprobieren. Mit etwas Kreativität könntest du ein paar ziemlich coole Modals machen. Versuch es einmal.

5 Mythen über das Unterrichten von Kindern zum Code

Da klar ist, dass die digitale Revolution unserer Zeit nicht aufzuhalten ist, hat sich die nächste Generation zu einer lukrativen Industrie entwickelt - denken Sie nur an die Programmierung von Apps für Kinder, Lernspielzeug und Roboter, die dazugehörigen Handbücher, Testbücher, Wettbewerbe, Nachhilfe, etc.Was

(Tech- und Design-Tipps)

Dieses Tool zeigt, was WordPress Plugins & Tools andere Sites verwenden

Bist du jemals auf einem Blog gelandet und hast gedacht "Ich frage mich, welches WP-Thema sie verwenden"?Nun, Sie können die Antwort schnell mit dem passend benannten What WordPress Theme Is That finden? Tool, das vollständig in Ihrem Browser ausgeführt wird. Es funktioniert, indem Sie alle Daten von der Website ziehen und das Stylesheet durchsuchen . D

(Tech- und Design-Tipps)