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.

<dl> Definitionsliste

CSS - Eingabefelder und Buttons formatieren

PHP - Text nach dem Alphabet sortieren

JavaScript - htmlEntities für JavaScript

MySQL - Tabelle nach 7 Tagen leeren

Zu lange Tabellen
Vermeiden Sie lange Tabellen. diese haben den Nachteil, dass die Kommunikation zwischen Server und Client (Ihnen) erheblich erhöht werden muss, was sich auf die Ladezeiten ebenso erheblich auswirkt. Denn der Inhalt einer Tabelle wird immer erst dann angezeigt, wenn diese vollständig geladen wurde. Unterbrechen Sie Tabellen daher immer an mehreren Stellen, um sie im Anschluss wieder weiterzuführen. So erscheint der Seiteninhalt optimaler Weise Stück für Stück und der 15 sekündige Totalausfall (weißer Bildschirm) bleibt dem Besucher erspart.