Created
June 30, 2024 11:56
-
-
Save zuzannamj/a4a7559d2f35186c792da35e2a2f2725 to your computer and use it in GitHub Desktop.
Toast notification on a CloudPage
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Toast Notification Example</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; } | |
| /* Button styling to match the screenshot */ | |
| .styled-button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| color: #fff; | |
| background-color: #0070d2; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .styled-button:hover { | |
| background-color: #005fb2; | |
| } | |
| /* Toast styling */ | |
| .toast { | |
| visibility: hidden; | |
| min-width: 250px; | |
| margin-left: -125px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 4px; | |
| padding: 16px; | |
| position: fixed; | |
| z-index: 1; | |
| left: 50%; | |
| bottom: 30px; | |
| font-size: 17px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .toast.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> | |
| <div class="slds-builder-toolbar__actions" aria-label="Document actions"> | |
| <button class="styled-button" onclick="showToast()">Show Toast</button> | |
| <div id="toast" class="toast">This is a toast notification!</div> | |
| <script> | |
| function showToast() { | |
| var toast = document.getElementById("toast"); | |
| toast.className = "toast show"; | |
| setTimeout(function() { toast.className = toast.className.replace("show", ""); }, 3000); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment