Responsive Modal Boxes erstellen

Einführung

In diesem Projekt lernst du, wie du eine Modalbox-Komponente erstellst, die auf einer Webseite angezeigt und versteckt werden kann. Modalboxen werden in Webanwendungen häufig verwendet, um zusätzlichen Inhalt oder Formulare anzuzeigen, ohne von der aktuellen Seite zu wechseln.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die HTML-Struktur für eine Modalbox einrichtest
• Wie du die Funktionalität implementierst, um die Modalbox anzuzeigen und zu verstecken
• Wie du Ereignisausbreitung behandelst, um zu verhindern, dass die Modalbox nach dem Verstecken erneut angezeigt wird

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine Modalbox mit HTML, CSS und JavaScript zu erstellen
• JavaScript-Funktionen verwenden, um die Sichtbarkeit der Modalbox zu steuern
• Ereignisausbreitung zu verhindern, um sicherzustellen, dass die Modalbox wie erwartet funktioniert

Skills Graph

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Die Anzeige- und Versteckfunktionalität implementieren

In diesem Schritt wirst du lernen, wie du die Funktionalität implementierst, um die Modalbox anzuzeigen und zu verstecken.

1. Locate the <script> section at the bottom of the index.html file.
2. In the <script> section, you will find the following code:

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. Understand the purpose of each function:

   • handleClick(e): Diese Funktion wird aufgerufen, wenn der Button "Jetzt registrieren" geklickt wird. Sie setzt die display-Eigenschaft der Modalbox auf 'block', was die Modalbox sichtbar macht.
   • handleOk(e): Diese Funktion wird aufgerufen, wenn der Schließknopf "X" oder der "OK"-Button innerhalb der Modalbox geklickt wird. Sie setzt die display-Eigenschaft der Modalbox auf 'none', was die Modalbox versteckt.

4. Die Zeile event.stopPropagation() in beiden Funktionen wird verwendet, um das Click-Ereignis von auf die übergeordneten Elemente zu "ausbreiten", was dazu führen könnte, dass die Modalbox nach dem Verstecken erneut angezeigt wird.

Teste die Funktionalität

1. Speichere die Datei index.html.
2. Aktualisiere die Webseite in deinem Browser.
3. Klicke auf den Button "Jetzt registrieren", um die Modalbox erscheinen zu sehen.
4. Klicke auf den Schließknopf "X" oder den "OK"-Button innerhalb der Modalbox, um die Modalbox verschwinden zu sehen. Die endgültige Wirkung sollte wie folgt aussehen:

Herzlichen Glückwunsch! Du hast die Anzeige- und Versteckfunktionalität für die Modalbox erfolgreich implementiert.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.