Erstellen von Modalfenstern mit dem HTML Dialog-Tag

Einführung

In diesem Labyrinth lernen Sie, wie Sie das HTML <dialog>-Tag verwenden, um ein Modalfenster oder einen Pop-up auf einer Webseite zu erstellen. Wir führen Sie durch den Schritt-für-Schritt-Prozess des Erstellens einer Beispiel-Dialogbox mithilfe des <dialog>-Tags.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Hinzufügen des dialog-Tags in index.html

Das <dialog>-Tag erfordert ein Start- und ein Endtag. In diesem Schritt fügen wir die grundlegende HTML-Struktur und das <dialog>-Tag zur index.html-Datei hinzu.

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Hinzufügen des dialog-Tags -->
    <dialog>
      <p>This is a sample dialog box!</p>
    </dialog>
  </body>
</html>

Hinzufügen eines Buttons zum Öffnen des Dialogs

In diesem Schritt erstellen wir einen Button, um die Dialogbox zu öffnen. Wir verwenden JavaScript, um die Dialogbox beim Klicken des Buttons zu öffnen und zu schließen.

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Hinzufügen des dialog-Tags -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Hinzufügen eines Buttons zum Öffnen des Dialogs -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Hinzufügen eines Buttons zum Schließen des Dialogs, der standardmäßig versteckt ist  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

Hinzufügen von CSS-Stil zum Dialog

In diesem Schritt fügen wir einigen CSS-Stil zur Dialogbox hinzu, um sie ansprechender zu gestalten.

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>

    <!-- Hinzufügen von Stilen für die Dialogbox -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Hinzufügen des dialog-Tags -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Hinzufügen eines Buttons zum Öffnen des Dialogs -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Hinzufügen eines Buttons zum Schließen des Dialogs, der standardmäßig versteckt ist  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

Jetzt ist unser HTML-Code vollständig für das Erstellen eines Modalfensters mit dem HTML <dialog>-Tag.

Zusammenfassung

Sie haben das Labyrinth zum Erstellen eines Modalfensters mit dem HTML <dialog>-Tag erfolgreich abgeschlossen. In diesem Labyrinth haben wir Schritt für Schritt den Prozess des Erstellens einer Beispiel-Dialogbox mit dem HTML <dialog>-Tag besprochen. Wir haben einen einfachen Button hinzugefügt, um die Dialogbox mit Hilfe von JavaScript zu öffnen und zu schließen. Darüber hinaus haben wir auch einige grundlegende CSS-Stile hinzugefügt, um das Aussehen der Dialogbox zu verbessern.

HTML Dialogfeld/Fenster

Einführung

Coden ohne Setup – sofort loslegen.

Hinzufügen des dialog-Tags in index.html

Hinzufügen eines Buttons zum Öffnen des Dialogs

Dein Coding-Labor im Browser.

Hinzufügen von CSS-Stil zum Dialog

Zusammenfassung