Toast Notifications
Build a global notification system that queues toast messages with different severity levels and auto-dismissal.
jQuery
Intermediate
4 min read
Toast Notification System
Example
window.notify = function(message, type = "info", duration = 4000) {
const colors = { success:"#198754", danger:"#dc3545", warning:"#ffc107", info:"#0dcaf0" };
const $toast = $(`<div class="toast-notification" role="alert" aria-live="assertive">`)
.css({ background: colors[type], color:"#fff" })
.text(message)
.appendTo("#toast-container")
.fadeIn(200);
const timer = setTimeout(() => $toast.fadeOut(200, () => $toast.remove()), duration);
$toast.on("click", () => { clearTimeout(timer); $toast.fadeOut(200, () => $toast.remove()); });
};
notify("Saved successfully!", "success");
notify("Something went wrong.", "danger", 0); // persistent Pro Tip
Set role="alert" and aria-live="assertive" so screen readers announce toast messages immediately.