HTML Popup mit Javascript

Question

Wie kann ich ein Popup auf einer HTML Seite mit Javascript aufpoppen lassen?

Answer 1

Hier ein einfaches Beispiel. Zuerst platzierst du das HTML für das Popup im Sourcecode

<div id="popup" class="popup">
    <p>Dies ist ein Popup!</p>
    <button id="closePopup">Schließen</button>
</div>

und fügst ein CSS hinzu welches das Popup unsichtbar darstellt.

.popup {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: white;
    justify-content: center;
    align-items: center;
}

Mit Javascript kannst dau das Popup anzeigen und wieder schliessen.

document.addEventListener("DOMContentLoaded", function() {

    var popup = document.getElementById("popup");

    // Zeige das Popup an
    popup.style.display = "flex";

    // Der Button zum schliessen des Popup
    var closePopup = document.getElementById("closePopup");

    // Schließe das Popup beim Klick auf den "Schließen"-Button
    closePopup.addEventListener("click", function() {
        popup.style.display = "none";
    });

});