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.

40 Clevere und kreative Valentinstag-Anzeigen

Für manche Menschen hat der Valentinstag seine Bedeutung verloren - sie denken, dass es sich um eine zu kommerzialisierte Feier handelt. Für andere ist der 14. Februar der romantischste Tag des Jahres, der, wenn er gefeiert wird, der Beziehung eine besondere Bedeutung verleiht.Ganz gleich, wie Sie sich bewegen, der Valentinstag wird immer eine Erinnerung für die Massen sein, wie wir uns immer mit verlorenen Lieben einfühlen und die Beziehungen beneiden können, die dauern . Mit

(Tech- und Design-Tipps)

Wie wählt man die perfekten Kopfhörer (2017)

Ob wir es zugeben oder nicht, einige von uns kaufen immer neue Kopfhörer. Andere werden nur frustriert mit einem Paar Kopfhörer, die einfach falsch für sie sind . Allerdings können Kopfhörer wirklich einmalige Investitionen sein, vor allem mit den Preisschildern kommen einige.Die Sprache zu verstehen und die Spezifikationen zu verstehen, ist das Wichtigste, wenn Sie das finden wollen, was Sie wirklich brauchen. Die

(Tech- und Design-Tipps)