Auto-Dismiss Notification
Home
Snippets
Auto-Dismiss Notification
HTML
CSS
JS
<div class="notification" id="notif"> Your changes were saved successfully! </div>
body { margin: 0; font-family: Arial, sans-serif; background: #f3f4f6; height: 100vh; display: flex; align-items: center; justify-content: center; } .notification { position: fixed; top: 20px; right: 20px; background: #10b981; color: white; padding: 16px 24px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translateY(-20px); pointer-events: none; transition: all 0.3s ease; z-index: 999; opacity: 0; } .notification.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
const notif = document.getElementById('notif'); function showNotification() { notif.classList.add('show'); setTimeout(() => { notif.classList.remove('show'); }, 5000); } window.onload = showNotification;
Ad #1
Ad #2
Scroll to Top