Created
November 18, 2025 10:08
-
-
Save yahyaahrika/4396766cafb9dd6f03be3923dfb3195b to your computer and use it in GitHub Desktop.
Taost message like popup . snackbar w3s update
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html5> | |
| <head> | |
| <title>Taost message like popup snackbar</title> | |
| <style> | |
| /* start Toastify Styles snackbar like toast */ | |
| /* The snackbar - position it at the bottom and in the middle of the screen */ | |
| .snackbar { | |
| visibility: hidden; /* Hidden by default. Visible on click */ | |
| min-width: 250px; /* Set a default minimum width */ | |
| margin-left: -125px; /* Divide value of min-width by 2 */ | |
| background-color: #333; /* Black background color */ | |
| color: #fff; /* White text color */ | |
| text-align: center; /* Centered text */ | |
| border-radius: 2px; /* Rounded borders */ | |
| padding: 16px; /* Padding */ | |
| position: fixed; /* Sit on top of the screen */ | |
| z-index: 1; /* Add a z-index if needed */ | |
| left: 50%; /* Center the snackbar */ | |
| bottom: 30px; /* 30px from the bottom */ | |
| } | |
| /* Show the snackbar when clicking on a button (class added with JavaScript) */ | |
| .snackbar.show { | |
| visibility: visible; /* Show the snackbar */ | |
| /* Add animation: Take 0.5 seconds to fade in and out the snackbar. | |
| However, delay the fade out process for 2.5 seconds */ | |
| -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; | |
| animation: fadein 0.5s, fadeout 0.5s 2.5s; | |
| } | |
| /* Animations to fade the snackbar in and out */ | |
| @-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="showToast('Hello, world!')">Show Toast</button> | |
| </body> | |
| <script> | |
| /* Toastify Styles snackbar like toast */ | |
| const TOAST_DEFAULT_DURATION = 3000; | |
| function showToast(title, duration = TOAST_DEFAULT_DURATION) { | |
| let snackbar = document.getElementById('global-snackbar'); | |
| if (!snackbar) { | |
| snackbar = document.createElement('div'); | |
| snackbar.id = 'global-snackbar'; | |
| snackbar.className = 'snackbar'; | |
| document.body.appendChild(snackbar); | |
| } | |
| snackbar.textContent = title; | |
| snackbar.classList.remove('show'); | |
| // Force reflow so animation restarts when re-adding the class | |
| void snackbar.offsetWidth; | |
| snackbar.classList.add('show'); | |
| if (snackbar.toastTimeout) { | |
| clearTimeout(snackbar.toastTimeout); | |
| } | |
| snackbar.toastTimeout = setTimeout(() => { | |
| snackbar.classList.remove('show'); | |
| }, duration || TOAST_DEFAULT_DURATION); | |
| } | |
| </script> | |
| </html5> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment