You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <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%; top: 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 {top: 0; opacity: 0;} to {top: 30px; opacity: 1;} }
@keyframes fadein { from {top: 0; opacity: 0;} to {top: 30px; opacity: 1;} }
@-webkit-keyframes fadeout { from {top: 30px; opacity: 1;} to {top: 0; opacity: 0;} }
@keyframes fadeout { from {top: 30px; opacity: 1;} to {top: 0; opacity: 0;} } </style> </head> <body>
<h2>Snackbar / Toast</h2> <p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p> <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>
<script> function myFunction() { var x = document.getElementById("snackbar"); x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); } </script>
</body></html>
|
