HTML: Popup Fenster erstellen

In HTML gibt es verschiedene Möglichkeiten, um ein Popup-Fenster zu erstellen. In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du ein solches Popup-Fenster erstellen kannst. Wir werden den einfachsten Ansatz verwenden, der JavaScript nutzt, um das Popup-Fenster zu öffnen und zu schließen.

Schritt 1: Öffne deinen bevorzugten Texteditor und erstelle eine neue HTML-Datei. Nenne sie zum Beispiel „popup.html„.

Schritt 2: Füge den folgenden Code in deine HTML-Datei ein:

<!DOCTYPE html>
<html>
<head>
    <title>Popup-Fenster Beispiel</title>
    <style>
        .popup {
            display: none; /* Das Popup-Fenster standardmäßig verstecken */
            position: fixed; /* Fixierte Positionierung */
            left: 50%; /* Horizontal in der Mitte des Bildschirms positionieren */
            top: 50%; /* Vertikal in der Mitte des Bildschirms positionieren */
            transform: translate(-50%, -50%); /* Zentrieren des Fensters */
            width: 300px; /* Breite des Fensters */
            height: 200px; /* Höhe des Fensters */
            background-color: #fff; /* Hintergrundfarbe des Fensters */
            padding: 20px; /* Innenabstand des Fensters */
            border-radius: 5px; /* Abrundung der Ecken */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
        }

        .overlay {
            /* Overlay für den Hintergrund erstellen */
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Hintergrundfarbe des Overlays */
        }
    </style>
</head>
<body>
    <!-- Popup-Fenster -->
    <div class="overlay"> </div> <!-- Hinzufügen des Overlays -->
    <div class="popup">
        <h2>Hallo, dies ist ein Popup-Fenster!</h2>
        <p>Klicke auf den Button, um das Fenster zu schließen.</p>
        <button onclick="closePopup()">Schließen</button> <!-- Schließen-Button -->
    </div>

    <!-- JavaScript -->
    <script>
        function openPopup() {
            document.querySelector(".popup").style.display = "block"; // Popup-Fenster anzeigen
            document.querySelector(".overlay").style.display = "block"; // Overlay anzeigen
        }

        function closePopup() {
            document.querySelector(".popup").style.display = "none"; // Popup-Fenster verstecken
            document.querySelector(".overlay").style.display = "none"; // Overlay verstecken
        }
    </script>

    <!-- Button zum Öffnen des Popups -->
    <button onclick="openPopup()">Popup-Fenster öffnen</button>
</body>
</html>

Schritt 3: Speichere die Datei und öffne sie in einem Webbrowser. Du solltest einen Button sehen, der das Popup-Fenster öffnet, wenn darauf geklickt wird.

Schritt 4: Teste das Popup-Fenster, indem du auf den „Popup-Fenster öffnen“-Button klickst. Das Popup-Fenster sollte erscheinen und den Text „Hallo, dies ist ein Popup-Fenster!“ enthalten.

Schritt 5: Klicke auf den „Schließen“-Button innerhalb des Popup-Fensters, um das Popup-Fenster zu schließen. Das Popup-Fenster sollte ausgeblendet werden.

Ergebnis

Popup-Fenster Beispiel

Herzlichen Glückwunsch! Du hast erfolgreich ein Popup-Fenster in HTML erstellt. Du kannst diesen Code als Ausgangspunkt verwenden und an deine Bedürfnisse anpassen, indem du zum Beispiel den Inhalt oder das Styling änderst. Viel Spaß beim Experimentieren und Erstellen von benutzerfreundlichen Popups für deine Website!

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

html html popup fenster

Hi !, Wohin möchtest du?

HTML: Popup Fenster erstellen – So gehts