Vor kurzem habe ich den Sprung von der Erstellung von Fullstack-Ruby-Apps zur Arbeit mit Javascript gemacht. Wie Sie vielleicht bereits wissen, ermöglicht Javascript Benutzern oder Clients die Interaktion mit einer Webseite und das dynamische Rendern neuer Inhalte im DOM basierend auf der Benutzerinteraktivität. Im Vergleich zur Codierung in Ruby on Rails (bei der jeder erneute Renderer eine vollständige Seitenaktualisierung erfordert) brachte die Fähigkeit, verschiedene Seitenelemente basierend auf Benutzerinteraktionen mit Javascript erneut zu rendern, meine Frontend-Entwicklungsfähigkeiten aus dem Jahr 1994 in die Gegenwart. Mit meinem rudimentären Verständnis von Javascript kann ich jetzt ein interaktives Webelement erstellen, auf dessen Implementierung ich mich in meinen Projekten gefreut habe: Meldungsfelder — oder Popups.
Ein Modal oder Dialogfeld ist ein Meldungsfeld, das im Browser nach einer bestimmten Benutzerinteraktivität angezeigt wird. Bevor wir uns mit den Besonderheiten des Erstellens einer modalen Box für Ihre Site mit HTML, CSS und Javascript befassen, sollten wir zunächst die verschiedenen Arten von Meldungsfeldern überprüfen, auf die Sie möglicherweise stoßen.
Warnungen
Eine Warnung ist ein Meldungsfeld, das normalerweise im Browser gesperrt ist und eine Benutzerantwort oder -interaktion erfordert, bevor es abgewiesen werden kann und von der Seite verschwindet. Möglicherweise möchten Sie, dass der Client Informationen (Nutzungsbedingungen) bestätigt, oder die Seite selbst bestätigt das Ausfüllen eines Formulars. Bis die Warnung jedoch abgewiesen wird, kann der Client nicht mit dem Rest der Seite interagieren.
Popup
Ein Popup ist ein klebriges (denken Sie, es klebt an der Seite, nicht klebrig wie Süßigkeiten) Meldungsfeld, das im Browser angezeigt wird und keine sofortige Interaktion oder Aufmerksamkeit erfordert. Wenn ein Benutzer möchte, dass sie verschwinden, muss er das Popup zu diesem Zeitpunkt schließen oder mit ihm interagieren, aber die Interaktivität des Restes der Seite ist weiterhin funktionsfähig. Benachrichtigungen sind ein Beispiel für ein Popup.
Growl Notification/Flash Notice
A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. Der Benutzer kann mit der Growl-Benachrichtigung interagieren – möglicherweise, um das Meldungsfeld vorzeitig zu schließen oder auf eine Schaltfläche in der Benachrichtigung zu klicken — oder um sie zu ignorieren, und sie verschwindet nach Ablauf des Timers. Wie ein Popup ermöglicht die Growl-Benachrichtigung dem Client, weiterhin mit dem Rest der Seite zu interagieren. Ein Beispiel hierfür ist eine E-Mail- oder Social-Media-Benachrichtigung.
Lightbox/Theatre
Eine Lightbox oder ein Theater ist ein Meldungsfeld, das normalerweise Inhalte vergrößert, die bereits im Browser verfügbar waren, 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 eine Lightbox oder ein Theater mit mehreren Inhalten verwendet wird, gilt es als ‚gesperrt‘, wenn ein Benutzer durch den zugehörigen Inhalt innerhalb der Lightbox selbst navigieren kann, anstatt zur Originalseite zurückzukehren und danach auf das nächste Bild in der Serie zu klicken, um es zu vergrößern.
Popover/Hovercard
Eines der kleineren Meldungsfelder, ein Popover oder eine Hovercard erscheint nur auf dem Bildschirm, wenn ein Benutzer mit der Maus über einen ausgewählten Bereich fährt. Diese Meldungsfelder können Anweisungen oder Erläuterungen zu der Schaltfläche oder dem Container enthalten, über die/den sich der Benutzer gerade befindet; sie können auch eine Vorschau auf Informationen enthalten, die verfügbar sind, wenn der Benutzer auf einen Link klickt.
Modal/Dialogfeld
Schließlich ist ein Modal 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 (z., der Client kann ohne erforderliche Interaktion davon weg navigieren), obwohl dies normalerweise der Fokus des Benutzers ist (basierend auf Ihrem Erscheinungsbild). 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 Suchabfrage bereitstellen muss, aber nicht zu einer anderen Seite navigieren soll.
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:
- HTML: Markup zum Erstellen des Modalelements
- CSS: Styling, um zu bestimmen, wie Ihr Modal auf der Seite aussieht und erscheint
- Javascript: platzieren von Ereignis-Listenern, sodass das Modal je nach Benutzerinteraktivität angezeigt / ausgeblendet wird
HTML
Für die einfachsten Modals benötigen wir eine Schaltfläche (oder ein beliebiges Seitenelement, das Sie bevorzugen), auf die ein Benutzer klicken kann, um das Modal, das eigentliche Modal, zu aktivieren, und Sie möchten wahrscheinlich eine Schaltfläche zum Schließen innerhalb des Modals implementieren.
<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<p>this is the text inside the modal</p>
</div>
</div>
Oben sehen Sie, dass wir eine Schaltfläche haben, die in unserem HTML-Code sowie in einem Modal mit drei CSS-Klassen angezeigt wird: modalmodal-btn und close-btn. Jedes davon wird in das folgende CSS aufgenommen. Das erste div ist der übergeordnete Container, der das gesamte Modal mit einer Klasse von modal . 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 p -Tags.
Als kurze Seite können Sie auch Kopf- und Fußzeilen in Ihrem Modal implementieren, indem Sie einfach weitere Divs innerhalb des HTML-Codes und weitere CSS-Klassen für Styling-Zwecke erstellen. Beispielsweise:
<div class="modal">
<div class="modal-header">
<span class="close-btn">×</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>
CSS
Um jedes der Elemente im HTML-Code unseres einfachen Modals zu formatieren, müssen wir die zugehörigen CSS-Klassen erstellen: .modal.modal-content und .close-btn. Außerdem können Sie unten sehen, dass auch CSS enthalten ist, um Animationen für das Modal zu erstellen.
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative;
background-color: white;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
In den obigen Klassen haben wir Styling für jedes der Elemente, die wir in unserem HTML erstellt haben.
Die .modal Klasse selbst hat Attribute, die bestimmen, wie sie die Seite hinter dem Modal selbst behandelt: eine Breite und Höhe im Vergleich zur Seite hinter dem Dialogfeld, eine Farbe (in diesem Beispiel wird ein halbdeckendes Grau verwendet) und eine Sichtbarkeitseinstellung, damit wir sie 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 vor dem Hintergrund-Styling, eine Hintergrundfarbe für das Dialogfeld selbst, Auffüllen und in diesem Beispiel ist eine Animation enthalten, so dass das Modal vom oberen Rand der Seite herunterfällt.
Außerdem haben wir eine .close-btn -Klasse erstellt, die ein ‚x‘ nach rechts schwebt, und mit .close-btn:hover ändert sich die Farbe, wenn der Benutzer mit der Maus über die Schaltfläche zum Schließen fährt. Aus Gründen der Übersichtlichkeit kann der Benutzer außerhalb des Modals klicken, um das Dialogfeld genauso zu schließen wie auf die Schaltfläche Schließen. Wir erstellen einen Ereignis-Listener für beide Optionen in unserem Javascript.
Dies kratzt kaum an der Oberfläche von CSS, das Sie selbst implementieren könnten. Fühlen Sie sich frei, den obigen Code an Ihre eigenen Bedürfnisse anzupassen.
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 = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
Wir haben mehrere Objekte aus unserem HTML ausgewählt und Variablen zugewiesen: eine modal-btn, die modal selbst und die close-btn. Dann haben wir Ereignis-Listener für onclick Ereignisse erstellt. Wenn ein Benutzer auf modal-btn klickt, wird der Anzeigestil auf "block” gesetzt, aber wenn er auf close-btn oder das Fenster außerhalb des Modals (in unserem Styling als halbdeckendes Grau dargestellt) klickt, wird der Anzeigestil danach auf "none". Dadurch wird das Modal effektiv ausgeblendet, bis sie erneut auf modal-btn klicken.
Insgesamt hat das Spielen mit dem DOM mit Javascript als Anfänger unglaublich viel Spaß gemacht und sich gelohnt. Hoffentlich hilft Ihnen der obige Code dabei, Modals und Meldungsfelder auch selbst zu implementieren. Mit etwas schnellem Googeln finden Sie auch weitere Ressourcen, um Modals und Dialogfelder für Ihre Anwendungsfälle anzupassen.
Viel Glück da draußen und viel Spaß beim Programmieren!