JavaScript - Pop-up automatisch ausblenden
<style>
.popup {
border: 2px Solid Gold;
border-radius: 10px;
padding: 10px;
box-shadow: 10px 10px 10px Lightgray;
height: 200px;
width: 50vw;
line-height: 200px;
background-color: Black;
color: White;
font-size: 40px;
text-align: Center;
position: Fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.remove {
transition: 3500ms all; // Geschwindigkeit in Millisekunden
transform: translate(-50%,-150vh);
}
</style>
<div id="popup" class="popup">Ich bin ein Pop-up!</div>
<script>
setTimeout(function() {
document.querySelectorAll(".popup")[0].classList.add("remove");
}, 2500); // Verzögerung in Millisekunden
</script>
Mit folgender CSS-Anweisung kann man das Pop-up nach unten verschieben.
Bei Seiten mit mehr Inhalt ist es notwendig die Angaben: 150vh und 3500ms anzupassen.
.remove {
transition: 3500ms all; // Geschwindigkeit in Millisekunden
transform: translate(-50%,150vh);
}
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<doctype> Dokumententyp
CSS - Diagonaler Streifen-Effekt
PHP - Datei ab einer gewissen Dateigröße automatisch mit Datum umbenennen