Как сделать всплывающее уведомление

Короткий ответ

Уведомление — блок в углу экрана с position: fixed. С атрибутом popover его показывает кнопка без скрипта:

<style>
  .toast { inset: auto 16px 16px auto; margin: 0; padding: 12px 16px; border: none; border-radius: 8px; background: #222; color: white; box-shadow: 0 6px 20px rgb(0 0 0 / 30%); }
</style>
 
<button popovertarget="saved">Save</button>
<div id="saved" class="toast" popover>Changes saved ✓</div>

У popover уже есть position: fixed, и по умолчанию он стоит в центре. inset: auto 16px 16px auto переносит его в правый нижний угол. Клик в любом месте закрывает уведомление.

Появление и автоскрытие

Плавно выехать уведомлению поможет @starting-style, а скрыть его через пару секунд — одна строка скрипта:

<style>
  .t { inset: auto 16px 16px auto; margin: 0; padding: 12px 16px; border: none; border-radius: 8px; background: seagreen; color: white; transition: translate 0.3s; }
  @starting-style { .t:popover-open { translate: 0 20px; } }
</style>
 
<button popovertarget="added" onclick="setTimeout(() => added.hidePopover(), 2500)">Add to cart</button>
<div id="added" class="t" popover="manual">Added to cart</div>

popover="manual" не закрывается кликом снаружи — его закрывает только скрипт или кнопка.

Для экранных дикторов

Чтобы текст уведомления прочитали вслух, держите на странице пустой контейнер с role="status" и вставляйте текст в него.

Частая ошибка

Показывать в уведомлении, которое само исчезает, ошибки и важные действия, например «Отменить удаление». Человек может не успеть прочитать или нажать. Ошибки показывайте рядом с полем, а для действий оставляйте уведомление открытым до закрытия вручную.