CSS - Statusmeldung nach 5 Sekunden ausblenden
Eine Statusmeldung
<style>
/* Statusmeldung nach 5 Sekunden ausblenden */
.success {
background-color: #e3ffe3;
border: solid 2px #00b700;
text-align: center;
color: #000000;
padding: 10px;
width: 250px;
animation: status 5s ease forwards;
}
@keyframes status {
0% {
opacity: 1;
pointer-events: all;
}
90% {
opacity: 1;
pointer-events: all;
}
100% {
opacity: 0;
pointer-events: none;
}
}
</style>
<div class="success">Eine Statusmeldung</div>
Statusmeldung je nach Nachricht ausblenden (mit JavaScript)
<style>
/* Statusmeldung je nach Nachricht ausblenden */
.success {
background-color: #e3ffe3;
border: solid 2px #00b700;
text-align: center;
color: #000000;
padding: 10px;
width: 250px;
animation: status 5s ease forwards;
}
.error {
background-color: #ffd5d5;
border: solid 2px #ff4d4d;
color: #000000;
padding: 10px;
width: 250px;
animation: status 10s ease forwards;
}
@keyframes status {
0% {
opacity: 1;
pointer-events: all;
}
90% {
opacity: 1;
pointer-events: all;
}
100% {
opacity: 0;
pointer-events: none;
}
}
</style>
<div id="message"></div>
<script>
let message = document.querySelector('#message');
if ("Inhalt" == "Inhalt") {
message.textContent = `Die Inhalte sind gleich.`;
message.classList.add("success");
}
else {
message.textContent = `Die Inhalte sind ungleich!`;
message.classList.add("error");
}
</script>
Pop-up nach 10 Sekunden ausblenden
<style>
/* Pop-up nach 10 Sekunden ausblenden */
div#popup {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1rem;
color: #000000;
background-color: #FFD700;
border: solid 2px #000000;
text-align: center;
padding: 5px;
width: 250px; /* Breite */
height: 270px; /* Höhe */
position: absolute;
left: 100px; /* Position von Links */
top: 90px; /* Position von Oben */
z-index: 1000;
box-shadow: 0px 0px 7px 6px #BBBBBB;
animation: popUp 10s ease forwards;
}
@keyframes popUp {
0% {
opacity: 1;
pointer-events: all;
}
90% {
opacity: 1;
pointer-events: all;
}
100% {
opacity: 0;
pointer-events: none;
}
}
</style>
<p>Test!</p>
<div id="popup">
Text und / oder Bild
</div>Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<small> Physische Auszeichnung
CSS - Markieren von Text verhindern
PHP - Dateigröße und letzte Aktualisierung