JavaScript - Pop-up automatisch ausblenden


<style>

.
popup {
 
border2px Solid Gold;
 
border-radius10px;
 
padding10px;
 
box-shadow10px 10px 10px Lightgray;
 
height200px;
 
width50vw;
 
line-height200px;
 
background-colorBlack;
 
colorWhite;
 
font-size40px;
 
text-alignCenter;
 
positionFixed;
 
top50%;
 
left50%;
 
transformtranslate(-50%,-50%);
}

.
remove {
 
transition3500ms all; // Geschwindigkeit in Millisekunden
 
transformtranslate(-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.

<progress> Fortschrittsanzeige

CSS - Mit import mehrere CSS-Dateien zusammenfassen

PHP - Eine Query String Variable entfernen

JavaScript - Ausgabe des aktuellen Datums mit Monats- und Tagesnamen

MySQL - Bei doppelter HOST-Adresse in der Tabelle warnen