Ich möchte das in bestimmten Fällen eine Messagebox für ein paar Sekunden angezeigt wird und dann selbst wieder verschwindet.
Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
height:300vh;
}
.fadeButton{
position:fixed;
top:0;
left:0;
}
.fade{
opacity:0;
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
margin: 8px 0px;
padding:8px;
position:fixed;
left: 50%;
top: 50%;
transform:translate(-50% ,-50%);
}
.elementToFadeInAndOut {
animation: fadeInOut 3s linear forwards;
}
@keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
</style>
</head>
<body>
<button class="fadeButton">Button</button>
<div class="fade">This is a message!</div>
<script>
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
setTimeout(function(){
div.classList.remove("elementToFadeInAndOut");
}, 3000);
});
</script>
</body>
</html>