Erstellen eines modalen Fensters mit HTML5 & Amp; CSS3

#close" title="Schließen" class=close>  X 
  Modale Box 
  Dies ist eine modale Beispielbox, die mit den Möglichkeiten von CSS3 erstellt werden kann. 
  Sie können eine Menge Dinge tun, wie zum Beispiel eine Popup-Anzeige, die anzeigt, wenn Ihre Website geladen wird, oder ein Login / Registrierungsformular für Benutzer erstellen. 

Styling beginnt

Im Moment haben wir nur eine Verbindung mit einem div darunter. Wir werden anfangen, unsere Box zu gestalten und sie tatsächlich funktional zu machen. Lassen Sie uns zunächst unsere modalDialog- Klassen erstellen und beginnen, voranzukommen.

.modalDialog {position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}

Der Code hier ist ziemlich einfach. Wir formatieren unser Dialogfeld, indem wir ihm eine feste Position zuweisen. Das bedeutet, dass es sich beim Öffnen der Seite nach unten bewegt, wenn Sie einen Bildlauf durchführen. Wir setzen auch unsere oberen, rechten, unteren und linken Kanten auf 0, so dass sich unser dunkler Hintergrund über den gesamten Monitor erstreckt.

Da wir wollen, dass der Hintergrund um die Modal-Box dunkel wird, wenn er offen ist, setzen wir den Hintergrund auf Schwarz und ändern die Deckkraft leicht. Wir stellen auch sicher, dass unsere modale Box über allem liegt, indem wir unsere z-index Eigenschaft setzen.

Schließlich haben wir einen schönen Übergang für unsere modale Box auf dem Bildschirm eingestellt, und verstecken Sie die Box, wenn es nicht angeklickt wird, indem Sie die Anzeige auf keine einstellen.

Sie sind möglicherweise nicht vollständig mit der Eigenschaft pointer-events vertraut, können jedoch steuern, wann Elemente aktiviert werden sollen und nicht. Wir legen es für unsere modalDialog- Klasse fest, weil die Verknüpfung nicht anklickbar sein soll, bis die Pseudoklasse ": target" ausgelöst wird.

Funktionalität und Aussehen

Nun fügen wir unsere Pseudo-Klasse " target" sowie das Design für unsere modale Box hinzu.

.modalDialog:target {opacity:1;pointer-events: auto;}.modalDialog > div {width: 400px;position: relative;margin: 10% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: #fff;background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999);}

Mit unserer Ziel- Pseudoklasse stellen wir unsere Anzeige auf Blockieren ein, so dass beim Anklicken der Verknüpfung unsere modale Box angezeigt wird. Wir verwenden auch unsere Eigenschaft "pointer-events", so dass der Link aktiviert ist, wenn er aktiv ist.

Wir formatieren dann unser div-Tag, indem wir die Breite und Position festlegen und unsere Ränder verwenden, um die modale Box von oben nach unten zu stoßen und sie auf unserer Seite zu zentrieren. Wir fügen dann einen kleinen Stil hinzu, indem wir eine Polsterung erstellen, einen schönen Randradius festlegen und einen Farbverlauf von weiß bis dunkelgrau für unseren Hintergrund verwenden.

Schließen Sie es

Jetzt, wo wir die modale Box gestylt und funktional gemacht haben, ist das letzte, was wir tun müssen, damit unser Button in der Nähe gut aussieht. Mit CSS3 und HTML5 können Schaltflächen erstellt werden, die wie Bilder aussehen, aber nicht. Hier ist das CSS, das wir dafür verwenden:

.close {background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center;top: -10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;}.close:hover { background: #00d9ff; }

Für unsere Schließen-Schaltfläche setzen wir den Hintergrund-Button und positionieren den Text mit unserem Text-Align und Line-Height. Dann positionieren wir den Button mit der absoluten Position und setzen unsere oberen und rechten Eigenschaften. Wie machen wir einen Kreis und fügen etwas Tiefe hinzu? Wir setzen den Randradius auf 12 und erzeugen einen leichten Schlagschatten. Um eine kleine Benutzerreaktion hinzuzufügen, ändern wir den Hintergrund in ein hellblaues Bild, wenn Sie den Mauszeiger darüber bewegen (andere Ideen für das Schweben sind das Hinzufügen eines linearen Übergangs zum Einblenden, Ändern des Schriftarttextes oder leichtes Vergrößern des Boxschattens).

Warum ist unsere modale Box besser?

Wie Sie wahrscheinlich bemerkt haben, ist das große Verkaufsargument dieser Technik, eine modale Box in HTML5 und CSS3 zu erstellen. Warum ist das so eine große Sache? Modale Boxen in JavaScript sind etwas, was ein Anfänger erstellen könnte, es gibt Hunderte von Beispielen und Downloads, die bereit sind, verwendet zu werden. Warum wollen wir JavaScript zugunsten von HTML5 und CSS3 verwerfen?

Es wäre naiv von mir zu sagen, dass ein Verkaufsargument dafür sorgt, dass Leute mit JavaScript sie benutzen können; Statistiken zeigen, dass nur 2% der Menschen weltweit ohne JavaScript surfen, also wenn das kein Problem ist, was ist das? Nun, wir haben die CSS3-Übergänge beim Erstellen unserer Modal-Box genutzt. Der vollständige Code war:

-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;

Wir haben nur drei Codezeilen verwendet, um unsere Animation zu erstellen. Wenn Sie das mit einer JavaScript-Animationsbibliothek vergleichen, werden Sie schockiert sein, wie sehr unser Code minimiert ist. Dies führt zu einem anderen Grund, das heißt, wir haben saubereren Code. Wir wissen, auf welche div-Datei die Animation angewendet wird und dass sie nur 3 Zeilen lang ist. Das macht es für uns einfach, es zu ändern oder das div so zu ändern, wie wir es für richtig halten, und wir müssen uns nicht darum kümmern, ein div in JavaScript sowie CSS und HTML zu ändern.

Schließlich sind HTML5 und CSS3 die Zukunft. Jeder arbeitet daran, sie in ihre Designs und Projekte zu implementieren, und ihre Verwendung trägt dazu bei, dass sie immer weiter umgesetzt wird und Sie nicht zurückgelassen werden. Sie erhalten saubereren Code, müssen sich keine Sorgen um JavaScript-Bibliotheken machen und haben eine ganze Reihe von Webdesignern und Entwicklern, die bereit sind, Ihnen bei allen Problemen zu helfen, die Sie vielleicht haben, weil sie begeistert sind, mehr über die Sprache zu lernen . HTML5 und CSS3 gehen nirgendwohin, also gibt es keinen Grund, sie nicht zu verwenden.

Wann man modale Boxen benutzt

So, jetzt, wo wir darüber nachgedacht haben, wie man die modalen Boxen macht und warum man sie mit HTML5 und CSS3 machen sollte, was ist, wenn Sie modale Boxen verwenden sollten?

Login / Formular registrieren

Ich denke, dass Modal-Boxen besonders nützlich sind, wenn sie für Anmelde- und Registrierungsformulare verwendet werden. Es schafft so eine optimierte Erfahrung für den Benutzer und kann wirklich einen Eindruck auf Ihre Besucher machen.

Zeigen Sie Bilder / Videos an

Eine weitere ausgezeichnete Verwendung von Modal-Boxen ist das Anzeigen von Bildern oder Videos (allgemein als Leuchtkästen bekannt). Es ermöglicht dem Benutzer, den Inhalt Ihrer Website zu sehen, ohne die Webseite zu verlassen, und hält sie so weiter in Ihre Web-Erfahrung investiert.

Benutzer-Feedback

Wenn ein Benutzer auf Ihrer Webseite interagiert und Sie mit ihm kommunizieren oder ihn über etwas informieren möchten, welchen besseren Weg gibt es als eine modale Box? Facebook macht sich einen großen Vorteil daraus, wenn Sie Ihre Sprache auf Ihrer Website ändern möchten, oder für kurze Notizen wie den Link "Warum muss ich meinen Geburtstag angeben?", Wenn Sie sich anmelden. Wenn es nicht genug Text hat oder eine ganze Seite sein muss, warum nicht eine modale Box verwenden?

Werbung

Ein gutes Beispiel für Werbung mit modalen Boxen ist der Musikradio-Dienst Pandora. Wenn Sie kein Mitglied ihres Premium-Service sind, erhalten Sie ab und zu eine Werbung auf Ihrem Bildschirm. Manchmal sind dies Audio-Werbungen, die aussehen, als würden Sie nur einen Song hören, und manchmal ist es ein Popup-Fenster für ein Video. Dies ist eine großartige Taktik für Leute, die Werbung in ihre Webseiten einfügen wollen, ohne sie immer auf der Seite zu haben.

Fazit

Dort haben Sie es, Sie können jetzt eine einfache modale HTML5 und CSS3-Box erstellen, und Sie können es für Dinge wie Anmelde- / Registrierungsformulare, Werbung und vieles mehr verwenden. Sie haben auch erfahren, warum wir HTML5 und CSS3 anstelle von JavaScript verwenden sollten, und einige Beispiele dafür gesehen, wie Websites modale Boxen verwenden und wie Sie sie in Ihre eigenen Designs implementieren können.

Sind Sie von den Möglichkeiten von HTML5 & CSS3 begeistert? Wird JavaScript letztendlich den Weg von Flash gehen? Verleihen Sie uns Ihre Meinung in den Kommentaren unten.

Vorschaubild über Shutterstock.