diedVIPs

html knowhow

Pop-up and close









Pop-up and close

Mit diesem Modul können Sie zweimal verfahren.
1. Das Popup öffnet und schließt bei Seitenload automatisch
2. Öffnen Sie mit dem Button das Pop-up. Es schließt automatisch
So sieht´s aus


Ihr Geburtsdatum:




Quellcode
<html>
<head>

<style type="text/css">
.popup {border: 2px Solid Gold;border-radius: 10px;padding: 10px;box-shadow: 10px 10px 10px Lightgray;height: 375px;width: 50vw;line-height: 200px;background-color: #CACACA;
background-image: url("../Bilder/Ambi.jpg");
background-size: cover;color: White;font-size: 40px;text-align: Center;position: Fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.remove {transition: 3500ms all;transform: translate(-50%,-150vh);}
</style>
</head>

<body >
<div id="popup" class="popup"></div>
<button type="button" id="button">Pop-up anzeigen</button>
<script>
setTimeout(function() {
document.querySelectorAll(".popup")[0].classList.add("remove");
}, 2500); // Millisekunden
document.querySelector("#button").addEventListener("click", function () {
document.querySelectorAll(".popup")[0].classList.remove("remove");
setTimeout(function() {
document.querySelectorAll(".popup")[0].classList.add("remove");
}, 2500);
});
</script>
<script>
setTimeout(function() {
document.querySelectorAll(".popup")[0].classList.add("remove");
}, 2500); // Verzögerung in Millisekunden
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum