Eine Anleitung für modale Boxen mit Javascript, HTML und CSS

Vor kurzem habe ich den Sprung von der Erstellung von Fullstack-Ruby-Apps zur Arbeit mit Javascript geschafft. Wie Sie vielleicht bereits wissen, ermöglicht Javascript Benutzern oder Kunden, mit einer Webseite zu interagieren und neuen Inhalt basierend auf der Benutzerinteraktivität dynamisch in das DOM zu rendern. Verglichen mit der Programmierung in Ruby on Rails (bei der jeder Renderer eine vollständige Seitenaktualisierung erfordert) brachte die Möglichkeit, verschiedene Seitenelemente basierend auf Benutzerinteraktionen mit Javascript erneut zu rendern, meine Fähigkeiten in der Frontend-Entwicklung von 1994 auf heute. Mit meinem rudimentären Verständnis von Javascript kann ich jetzt ein interaktives Webelement erstellen, das ich schon immer in meinen Projekten implementieren wollte: Meldungsfelder - oder Popups.

Ein modales oder Dialogfeld ist ein Meldungsfeld, das nach einer bestimmten Benutzerinteraktivität im Browser angezeigt wird. Bevor wir uns mit den Einzelheiten der Erstellung eines modalen Felds für Ihre Website mit HTML, CSS und Javascript befassen, möchten wir zunächst die verschiedenen Arten von Meldungsfeldern erläutern, auf die Sie möglicherweise stoßen.

Arten von Meldungsfeldern

Warnungen

Eine Warnung ist ein Meldungsfeld, das normalerweise im Browser gesperrt ist und eine Benutzeraktion oder -interaktion erfordert, bevor es geschlossen werden kann und von der Seite verschwindet. Möglicherweise möchte der Kunde Informationen (Nutzungsbedingungen) bestätigen oder die Seite selbst bestätigt das Ausfüllen eines Formulars. Solange die Warnung nicht abgewiesen wird, kann der Client jedoch nicht mit dem Rest der Seite interagieren.

Benachrichtigungsfeld

Pop-up

Ein Popup ist ein klebriges Meldungsfeld, das im Browser angezeigt wird und keine unmittelbare Interaktion oder Aufmerksamkeit erfordert. Wenn ein Benutzer möchte, dass sie verschwinden, muss er zu diesem Zeitpunkt das Popup schließen oder mit ihm interagieren. Die Interaktivität auf dem Rest der Seite ist jedoch weiterhin funktionsfähig. Benachrichtigungen sind ein Beispiel für ein Popup.

Popup-Meldungsfeld

Growl-Benachrichtigung / Flash-Hinweis

Eine Growl-Benachrichtigung ist ein Popup, das sich nach einer bestimmten Zeit selbst schließt. Diese werden manchmal auch als Flash-Mitteilungen bezeichnet. Der Benutzer kann mit der Knurren-Benachrichtigung interagieren - möglicherweise, um das Meldungsfeld vorzeitig zu schließen oder auf eine Schaltfläche in der Benachrichtigung zu klicken - oder sich dafür entscheiden, sie zu ignorieren, und sie wird nach Ablauf des Timers ausgeblendet. Wie bei einem Popup kann der Client mit der Growl-Benachrichtigung weiterhin mit dem Rest der Seite interagieren. Ein Beispiel hierfür ist eine E-Mail- oder Social-Media-Benachrichtigung.

Growl-Benachrichtigung

Leuchtkasten / Theater

Ein Leuchtkasten oder ein Theater ist ein Meldungsfeld, das normalerweise den Inhalt vergrößert, der bereits im Browser verfügbar war, damit sich ein Benutzer darauf konzentrieren kann. Ein häufiger Anwendungsfall ist ein Bild oder eine Reihe von Bildern, die in einer Galerie angezeigt werden. Wenn ein Leuchtkasten oder ein Theater mit mehreren Inhalten verwendet wird, gilt dies als gesperrt, wenn ein Benutzer durch den zugehörigen Inhalt innerhalb des Leuchtkastens selbst navigieren kann, anstatt zur Originalseite zurückzukehren und anschließend auf das nächste Bild in der Serie zu klicken vergrößern.

Leuchtkasten / Theater

Popover / Schwebekarte

Eines der kleineren Meldungsfelder, ein Popover oder eine Schwebekarte, wird nur dann auf dem Bildschirm angezeigt, wenn ein Benutzer mit der Maus über einen ausgewählten Bereich fährt. Diese Meldungsfelder können Anweisungen oder Erklärungen zu den Schaltflächen oder Containern enthalten, über die der Benutzer gerade schwebt. Sie können auch eine Vorschau auf verfügbare Informationen enthalten, wenn der Benutzer auf einen Link klickt.

Popover / Schwebekarte

Modal / Dialogfeld

Schließlich ist ein modales oder Dialogfeld ein Meldungsfeld, das eine weitere Interaktivität der Seite ermöglicht, ohne vom aktuellen Inhalt im Browser weg zu navigieren. Eine modale Box ist nicht an den Bildschirm gebunden (d. H. Der Client kann ohne erforderliche Interaktion von ihr weg navigieren), obwohl dies in der Regel der Fokus des Benutzers ist (basierend auf Ihrem Design der Box). Wenn ein Benutzer das Modal schließen möchte, kann er das Feld in den meisten Fällen einfach mit einer bereitgestellten Schaltfläche schließen oder außerhalb des Modals klicken. Ein Beispiel für ein Modal ist, wenn ein Benutzer ein Formular ausfüllen oder bestimmte Informationen für eine Suchanfrage bereitstellen muss, aber nicht zu einer anderen Seite navigieren soll.

Modal / Dialogfeld

Implementierung eines Modals

Um ein Modal auf Ihrer Seite zu erstellen und zu implementieren, müssen Sie drei Schritte ausführen, um die Funktionalität zu gewährleisten:

  1. HTML: Markup zum Erstellen des modalen Elements
  2. CSS: Stil, der bestimmt, wie Ihr Modal auf der Seite aussieht und angezeigt wird
  3. Javascript: Platzieren Sie Ereignis-Listener so, dass das Modal je nach Benutzerinteraktivität angezeigt oder ausgeblendet wird

HTML

Für das einfachste Modal benötigen wir eine Schaltfläche (oder ein beliebiges Seitenelement, das Sie bevorzugen), auf das ein Benutzer klicken kann, um das Modal und das eigentliche Modal zu aktivieren, und Sie möchten wahrscheinlich eine Schließen-Schaltfläche innerhalb des Modals implementieren.

Oben sehen Sie, dass in unserem HTML-Code eine Schaltfläche sowie ein Modal mit drei CSS-Klassen angezeigt wird: modal, modal-btn und close-btn. Jedes dieser Elemente wird in das unten stehende CSS aufgenommen. Das erste div ist der übergeordnete Container, der das gesamte Modal mit einer Klasse von Modal enthält. Intern haben wir ein div, das den Inhalt für das Modal selbst enthält: die Schaltfläche zum Schließen des Modals im Span und den Text innerhalb eines ptags.

Kurz gesagt, Sie können auch Kopf- und Fußzeilen in Ihrem Modal implementieren, indem Sie einfach mehr Divs im HTML-Code und weitere CSS-Klassen für Stilzwecke erstellen. Zum Beispiel:

CSS

Um jedes der Elemente im HTML-Code unseres einfachen Modals zu formatieren, müssen die zugehörigen CSS-Klassen erstellt werden: .modal, .modal-content und .close-btn. Weiter unten sehen Sie, dass auch CSS enthalten ist, um Animationen für das Modal zu erstellen.

.modal {
  Anzeige: keine;
  Position: feststehend;
  Auffüllenoberteil: 50px;
  links: 0;
  oben: 0;
  Breite: 100%;
  Höhe: 100%;
  Hintergrundfarbe: rgb (0, 0, 0);
  Hintergrundfarbe: rgba (0, 0, 0, 0,5);
}
.modal-content {
  Position: relativ;
  Hintergrundfarbe: weiß;
  Polsterung: 20px;
  Rand: Auto;
  Breite: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animation-dauer: 0.4s;
  Animationsname: animatetop;
  Animationsdauer: 0.4s
}
.close-btn {
  schweben rechts;
  Farbe: hellgrau;
  Schriftgröße: 24px;
  Schriftdicke: fett;
}
.close-btn: hover {
  Farbe: dunkelgrau;
}
@ -webkit-keyframes animatetop {
  von {oben: -300px; Deckkraft: 0}
  nach {oben: 0; Deckkraft: 1}
}
@keyframes animatetop {
  von {oben: -300px; Deckkraft: 0}
  nach {oben: 0; Deckkraft: 1}
}

In den obigen Klassen haben wir das Styling für jedes der Elemente, die wir in unserem HTML erstellt haben.

Die .modal-Klasse selbst verfügt über Attribute, die bestimmen, wie die Seite hinter dem Modal selbst behandelt wird: Breite und Höhe im Vergleich zur Seite hinter dem Dialogfeld, eine Farbe (in diesem Beispiel wird ein halbopakes Grau verwendet) und eine entsprechende Sichtbarkeitseinstellung dass wir es in unserem Javascript umschalten können, wenn ein Benutzer auf die Schaltfläche klickt.

Für das eigentliche Dialogfeld haben wir auch ein separates Styling in .modal-content: Positionieren gegen das Hintergrund-Styling, eine Hintergrundfarbe für das Dialogfeld selbst, Auffüllen, und in diesem Beispiel ist eine Animation enthalten, so dass das Modal nach unten abfällt oben auf der Seite.

Außerdem haben wir eine .close-btn-Klasse entworfen, die ein "x" nach rechts verschiebt. Wenn der Benutzer mit der Maus über die Schaltfläche "Schließen" fährt, ändert sich die Farbe. Der Übersichtlichkeit halber kann der Benutzer auf eine Stelle außerhalb des Modals klicken, um das Dialogfeld zu schließen, genau wie beim Klicken auf die Schaltfläche zum Schließen. In unserem Javascript erstellen wir einen Ereignis-Listener für beide Optionen.

Dies kratzt kaum an der Oberfläche von CSS, die Sie selbst implementieren könnten. Sie können den obigen Code jederzeit an Ihre Bedürfnisse anpassen.

Javascript

Zuletzt müssen wir etwas Javascript schreiben, um die Funktionalität des Modals zu erstellen.

let modalBtn = document.getElementById ("modal-btn")
let modal = document.querySelector (". modal")
let closeBtn = document.querySelector (". close-btn")
modalBtn.onclick = function () {
  modal.style.display = "block"
}
closeBtn.onclick = function () {
  modal.style.display = "keine"
}
window.onclick = function (e) {
  if (e.target == modal) {
    modal.style.display = "keine"
  }
}

Wir haben mehrere Objekte aus unserem HTML-Code ausgewählt und Variablen zugewiesen: ein Modal-BTN, das Modal selbst und das Close-BTN. Anschließend erstellen wir Ereignis-Listener für On-Click-Ereignisse. Wenn ein Benutzer auf das Modal-BTN klickt, wird der Anzeigestil auf "Block" gesetzt. Wenn er jedoch auf das Close-BTN oder das Fenster außerhalb des Modals klickt (in unserem Stil als semi-opakes Grau dargestellt), wird das Daraufhin wird der Anzeigestil auf "none" gesetzt, wodurch das Modal so lange ausgeblendet wird, bis es erneut auf das Modal-BTN klickt.

Modal auf dem Bildschirm gedruckt

Insgesamt hat das Spielen mit dem DOM mit Javascript unglaublich viel Spaß gemacht und sich als Anfänger gelohnt. Hoffentlich hilft Ihnen der obige Code dabei, Modalitäten und Meldungsfelder auch selbst zu implementieren. Mit etwas schnellem Googeln finden Sie auch weitere Ressourcen zum Anpassen von Modalitäten und Dialogfeldern für Ihre Anwendungsfälle.

Viel Glück da draußen und viel Spaß beim Programmieren!

Ressourcen

Stapelaustausch: Modale, Popups, Popovers und Leuchtkästen

w3schools: How To - CSS / JS Modal

Sabe: So erstellen Sie eine modale Popup-Box mit CSS und JavaScript