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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>