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.

Wie Sie Ihre Leser dazu bringen, Ihre Inhalte zu vermarkten

Bei all seinen konzeptionellen Höhepunkten geht es beim digitalen Marketing nicht nur um den Input von Experten. In der Tat, wenn es darauf ankommt, zusätzlichen Traffic über Google und über soziale Medien zu generieren, werden Sie durch den nutzergenerierten Inhalt weiter gestärkt und Sie erhalten die Sicherheit, größere Fortschritte zu machen (manchmal, wenn nicht immer).Um Ihr

(Tech- und Design-Tipps)

Tsu Social Network - Cash Cow oder Pyramid Scheme? [Op-Ed]

Wenn Sie ein Internetgadabout sind, haben Sie wahrscheinlich von Tsu.co oder Tsū gehört, dem sozialen Netzwerk, das in letzter Zeit viel Hype bekommen hat und hasst. Im Laufe seines jahrelangen Bestehens wurde das exotische soziale Netzwerk namens Tsū von Neinsagern geplagt und erst kürzlich wurde seine API und Links von Facebook verbannt.Wen

(Tech- und Design-Tipps)