Wie css message box anzeigen nach button klick?
Ich möchte das in bestimmten Fällen eine Messagebox für ein paar Sekunden angezeigt wird und dann selbst wieder verschwindet.
Der hier verwendete 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>