Skip to content

Instantly share code, notes, and snippets.

@zuzannamj

zuzannamj/toast-notification.html

Last active July 16, 2024 15:38
Show Gist options
  • Save zuzannamj/a4a7559d2f35186c792da35e2a2f2725 to your computer and use it in GitHub Desktop.
Save zuzannamj/a4a7559d2f35186c792da35e2a2f2725 to your computer and use it in GitHub Desktop.
Download ZIP
Toast notification on a CloudPage
Raw
toast-notification.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; }
.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 { 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>
<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