Demo for Automatically Self-Closing Snackbar Popup

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
.container {
  width: 90%;
  max-width: 100%;
  padding: 15px;
  margin: 0 auto;
}
button {
  width: 131px;
  height: 45px;
  background: greenyellow;
  border-radius: 5px;
  cursor: pointer;
}
</style>

</head>
<body>
<div class="container">
  <h2>Snackbar Popup</h2>
  <p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>
  <button onclick="myFunction()">Show Snackbar</button>
  <div id="snackbar">Some text some message..</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
function myFunction() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>

</body>
</html>

Other Codes

Bootstrap Popup Close on Page Scroll

In this code, we have a pop-up that is displayed at the beginning and is not displayed by scrolling, and instead of that, a button is placed.

Chat Window Popup

In this code we have a pop-up to display the chat window in the corner of the website. This window is opened by one button and closed by another button.

Growing Popup Code with Hide/Show Buttons

In this code we have a simple button. Clicking that button will display a pop-up in the middle of the screen. At the bottom of this pop-up there is a . . .

HTML Animating Image Popups

In this post, we have a pop-up that is based on photos instead of text. There are different models for displaying this pop-up with the help of animations . . .