Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- #snackbar {
- visibility: hidden;
- min-width: 250px;
- 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;}
- }
- </style>
- </head>
- <body>
- <button onclick="myFunction()">Show Snackbar</button>
- <div id="snackbar">Some text some message..</div>
- <script>
- function myFunction() {
- var x = document.getElementById("snackbar");
- x.className = "show";
- setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment