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.

<thead> Tabellenkopf

CSS - Texteingabe nur in Großbuchstaben

PHP - Datum zerlegen 1

JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen

MySQL - Alle Einträge nach einem Tag löschen

Prägnante Linkbeschreibungen
Auch Links sind im Textfluss eine Art von Hervorhebungen. Sinnvollerweise sollten einzelne Wörter oder kurze Sätze als Link fungieren und nicht etwa ganze Textabsätze.