Dieses Tutorial ist ein weiteres unterhaltsames CSS-Projekt, mit dem Sie etwas erstellen können, von dem Sie denken, dass es nur mit JavaScript möglich wäre. Wir erstellen ein modales Fenster, das mit einem Klick, der von einem CSS-Kontrollkästchen unterstützt wird, angezeigt und ausgeblendet werden kann.
Um das Geschäft zu versüßen, verwenden wir auch eine Medienabfrage, um sicherzustellen, dass sich der modale Bildschirm gut an kleinere Bildschirmgrößen anpasst. Lass uns rein springen und sehen, wie alles funktioniert!
Live Demo: Klicken Sie hier, um zu starten.
Fertig machen
Zunächst benötigen wir generische Inhalte, die auf der Seite immer sichtbar sind. Wir brauchen nichts Besonderes, nur einen Text fürs Erste. Ich habe eine grundlegende Überschrift und einen Absatz verwendet:
So weit, so gut, gehen wir jetzt auf die Schaltfläche, die unser modales Fenster ein- und ausschaltet.
HTML umschalten
In diesem Artikel haben die Kommentatoren dafür gestimmt, weitere Tutorials zum Überschreiben von Ankreuzfeldern zum Erstellen von reinen CSS-Klickereignissen zu sehen. Das ist genau das, was wir hier tun werden!
Wie das funktioniert, ist ziemlich einfach. Wir beginnen mit einer Eingabe mit einer Art Checkbox. mit einem einfachen Textetikett wie folgt:
Wie Sie sehen, ist das? Label für? Abschnitt stimmt mit der ID der Eingabe überein. Das ist wichtig! Die nette Funktionalität hier ist, dass selbst wenn wir das eigentliche Kontrollkästchen ausblenden, was genau das ist, was wir tun werden, dieses Label als anklickbares Element dienen kann, das den aktivierten Zustand des Kontrollkästchens umschaltet.
Modales HTML
Nun ist es an der Zeit, unseren HTML-Code zu beenden, indem der eigentliche modale Fenstercode hinzugefügt wird. Erstellen Sie nach dem Kontrollkästchen ein Div mit einer Klasse "Modal". In diesem Div können Sie alles platzieren, was Sie möchten. Ich ging mit einer anderen einfachen Überschrift und Absatzeinstellung.
Damit sind wir mit unserem HTML fertig. Wenn wir unsere Seite in einem Browser öffnen, gibt es wirklich nicht viel zu sehen. Alle wichtigen Elemente, die wir brauchen, sind jedoch vorhanden und bereit für die Gestaltung.
Body & Container CSS
Nachdem wir unseren HTML-Code fertiggestellt haben, gehen wir zu unserem CSS über und machen das Ding ein bisschen besser. Das Erste, was ich tun werde, ist ein wiederkehrendes hölzernes Hintergrundbild, um unsere Seite ein wenig attraktiver zu machen.
Wie Sie sehen, stammt dieses Bild von SubtlePatterns. Als nächstes werden wir unseren Container gestalten. Beginnen Sie zuerst mit etwas Rand, Füllungen und Größenanpassungen und fahren Sie dann mit dem Text fort.
Wie Sie sehen, haben wir die CSS-Kurzschrift verwendet, um das Schriftstiling für unsere Überschriften und Absätze festzulegen. Dies ist eine prägnante Methode, um Gewicht, Größe, Zeilenhöhe und Schriftfamilie anzugeben. Beachten Sie, dass meine Zeilenhöhe auf 1,5 festgelegt ist, ohne dass ein Einheitentyp angegeben wurde. Mit diesem kleinen Trick können Sie die Zeilenhöhe als Verhältnis zur Schriftgröße definieren.
Kontrollkästchen CSS
Nachdem wir unseren generischen Seiteninhalt gestaltet haben, ist es an der Zeit, das Label und das Kontrollkästchen anzugreifen. Der erste Schritt hier ist, die Beschriftung so zu gestalten, dass sie eher wie eine Schaltfläche und weniger wie ein einfacher Text aussieht.
Wenn wir die Beschriftung in ein Element auf Blockebene ändern, können wir Höhe, Breite und Hintergrundfarbe festlegen. Dies hilft uns dabei, das gewünschte Button-Aussehen zu erreichen. Beachten Sie auch, dass ich einen Hover-Stil zum Ändern der Farbe und des Cursors einstelle, sodass er sich eher wie ein Link verhält.
Da unser Label so aussieht, wie wir es uns wünschen, können wir nun das eigentliche Kontrollkästchen abhaken. Ändern Sie dazu einfach die Position in absolut und schieben Sie sie von der Leinwand.
Mit diesem Code sieht unsere Seite sehr gut aus. Hier ist ein Blick:
Modales CSS
Der statische Seiteninhalt wird markiert und gestaltet. Unsere nächste Aufgabe ist es, das letzte Stück HTML wie eine modale Box aussehen zu lassen. Wir machen das mit einem ziemlich kräftigen Teil von CSS. Lassen Sie uns einen Blick darauf werfen und ich werde Sie dann durchgehen.
Hier ist viel los, also lassen Sie uns das aufteilen. Das erste Ziel war, die Box auf der Seite zu zentrieren. Dies ist ziemlich schwierig, da wir das vollständige Ansichtsfenster verwenden und daher die Abmessungen unserer Eltern nicht kennen.Durch die Verwendung der absoluten Positionierung, der automatischen Ränder und des Zurücksetzens der Positionswerte zentrieren wir unseren Artikel effektiv auf dem Bildschirm.
Beachten Sie, dass ich auch den Z-Index auf einen negativen Wert gesetzt habe. Dies liegt daran, dass das modale Fenster, selbst wenn es ausgeblendet ist, andere Elemente auf der Seite blockieren kann. Sie werden es nicht sehen, aber es könnte möglicherweise ein Klicken oder Schweben verhindern, sodass wir es an den unteren Rand des Stapels werfen.
Der Rest des Codes ist visuelles Flair. Wir haben ihm die Werke gegeben: leicht transparenter Hintergrund, Box-Schatten, Übergang und abgerundete Ecken. Beachten Sie, dass die Deckkraft standardmäßig auf 0 eingestellt ist. Dies liegt daran, dass das modale Fenster nur angezeigt werden soll, wenn wir auf die Schaltfläche klicken.
Modal Type
Wir haben unsere Box gestylt, aber den Typ nicht vergessen. Wir werden Stile verwenden, die dem anderen Text auf der Seite ähneln, sich aber leicht davon unterscheiden. Denken Sie daran, sowohl den h2 als auch den Absatz zu formatieren.
Geprüfter Zustand
Bring es zum Laufen!
Die Modalbox sieht jetzt gut aus, aber Sie würden es nie erfahren, weil sie versteckt ist. Lassen Sie uns es so machen, dass es erscheint, wenn auf das Label / die Schaltfläche geklickt wird.
Hier haben wir die Eingabe mit dem "Toggle" vorgenommen. Klasse und einem geprüften Staat, suchte dann ein benachbartes Geschwister mit einer Klasse von "Modal". Als Nächstes bringen wir die Deckkraft und den Z-Index des modalen Fensters auf eins, so dass es vollständig sichtbar wird.
Adaptives CSS
Unsere Modalbox ist fast fertig! Alles funktioniert einwandfrei und schön gestaltet. Mir ist jedoch aufgefallen, dass die Dinge nicht richtig aussehen, wenn die Größe des Darstellungsbereichs reduziert wird. Ein bisschen adaptives Styling ist hier ein langer Weg, also lassen wir uns die Mühe geben.
Wie Sie sehen, habe ich einfach eine einzige Medienabfrage bei 767px eingerichtet und die Größe einiger Dinge reduziert: die Abmessungen der Box, der h2 und des Absatzes. Die modale Box verfügt jetzt über zwei verschiedene Status, sodass sie auf kleinen oder großen Bildschirmen gut aussieht.
Sehen Sie es in Aktion
Damit sind wir alle fertig! Um die Seite für sich selbst zu testen, besuchen Sie die folgende Demo.
Demo: Klicken Sie hier, um zu starten.
Was denkst du?
Dort haben Sie es, ein reines CSS-Modalfenster, das sich an kleine und große Bildschirmgrößen anpasst. Wie immer gibt es einige semantische Bedenken, wenn er eine Checkbox für so etwas entführt, aber ich hatte nicht das Gefühl, dass dies ein Job für: target war, also schien dies der Weg zu sein.
Hinterlasse einen Kommentar und lass mich wissen, was du denkst. Was würdest du ändern? Wie würdest du es besser machen?