سورس کد دکمه نمایش پیام محو شونده (Toast Notification) با HTML، CSS و JS

وقتی کاربر فرمی را ارسال می‌کند، محصولی را به سبد می‌افزاید یا کدی را کپی می‌کند، باید بفهمد کارش انجام شده است. بهترین راه برای این بازخورد کوچک، دکمه نمایش پیام محو شونده است: پیامی که چند ثانیه دیده می‌شود و بدون مزاحمت محو می‌شود. در این مطلب از طاووس وب نسخهٔ کامل و به‌روز این سورس را می‌سازیم. نسخهٔ قدیمی را هم می‌توانید در پیش‌نمایش اولیه ببینید.

دموی زنده پیام محو شونده

پیام محو شونده کجا به کار می‌آید؟

پیام محو شونده برای بازخوردهای کوچک و غیرحیاتی ساخته شده است؛ یعنی جاهایی که کاربر فقط باید بداند کار انجام شد و نیازی به تصمیم‌گیری ندارد:

• افزودن محصول به سبد خرید یا علاقه‌مندی‌ها
• کپی شدن کد تخفیف یا لینک
• ذخیرهٔ تنظیمات حساب کاربری
• ارسال موفق فرم تماس یا عضویت در خبرنامه
• قطع و وصل شدن اینترنت در وب‌اپلیکیشن‌ها

برای کارهای برگشت‌ناپذیر مثل حذف حساب یا پرداخت، پیام محو شونده کافی نیست؛ آنجا باید از پنجرهٔ تأیید (Modal) استفاده کنید تا کاربر آگاهانه تصمیم بگیرد.

سورس کد کامل دکمه نمایش پیام محو شونده

در HTML فقط دکمه و یک ظرف خالی برای پیام‌ها لازم است. ویژگی aria-live باعث می‌شود پیام‌های جدید برای صفحه‌خوان خوانده شوند:

<button type="button" class="btn-toast" data-type="ok">ذخیره</button>

<div class="toast-box" role="status" aria-live="polite"></div>

در CSS، ظرف پیام‌ها پایین و وسط صفحه ثابت می‌شود و هر پیام با انیمیشن وارد و خارج می‌شود. رنگ هر نوع پیام با متغیر --c تعیین می‌شود:

.toast-box {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 32px));
  z-index: 9999; pointer-events: none;
}
.toast {
  pointer-events: auto;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: #2B0A47;
  padding: 14px 16px; border-radius: 14px;
  border-right: 5px solid var(--c);
  box-shadow: 0 14px 34px rgba(43,10,71,.2);
  animation: toastIn .35s cubic-bezier(.2,.8,.2,1);
}
.toast .bar {
  position: absolute; bottom: 0; right: 0;
  height: 3px; width: 100%; background: var(--c);
  animation: toastBar var(--t) linear forwards;
}
.toast:hover .bar { animation-play-state: paused; }
.toast.out { animation: toastOut .35s ease forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes toastBar { to   { width: 0; } }

جاوااسکریپت یک تابع showToast می‌سازد که هر جای سایت قابل استفاده است:

const box = document.querySelector('.toast-box');
const TYPES = {
  ok:  { icon: '✓', color: '#1FAE57' },
  err: { icon: '!', color: '#E03131' },
  inf: { icon: 'i', color: '#5F01AF' },
};

function showToast(text, type = 'ok', duration = 3500) {
  const t = TYPES[type];
  const el = document.createElement('div');
  el.className = 'toast';
  el.style.setProperty('--c', t.color);
  el.style.setProperty('--t', duration + 'ms');
  el.innerHTML = `<i>${t.icon}</i><span></span><span class="bar"></span>`;
  el.querySelector('span').textContent = text; // جلوگیری از تزریق HTML
  box.appendChild(el);

  if (box.children.length > 3) box.firstElementChild.remove();

  // وقتی نوار زمان تمام شد، پیام محو و حذف می‌شود
  el.querySelector('.bar').addEventListener('animationend', () => {
    el.classList.add('out');
    el.addEventListener('animationend', () => el.remove(), { once: true });
  });
}

document.querySelectorAll('.btn-toast').forEach((btn) => {
  btn.addEventListener('click', () => showToast('تغییرات ذخیره شد.', btn.dataset.type));
});

نکتهٔ مهم این کد، استفاده از animationend به‌جای setTimeout است. چون زمان محو شدن به انیمیشن نوار گره خورده، وقتی کاربر ماوس را روی پیام نگه می‌دارد و انیمیشن متوقف می‌شود، پیام هم محو نمی‌شود. با setTimeout این رفتار را باید جداگانه پیاده کنید.

استفاده از پیام محو شونده در وردپرس و ووکامرس

در وردپرس می‌توانید CSS را در «سفارشی‌سازی > CSS اضافی» و جاوااسکریپت را با افزونه‌ای مثل HFCM یا در فایل قالب فرزند در فوتر قرار دهید. سپس تابع showToast را در رویدادهای مختلف صدا بزنید؛ مثلاً در ووکامرس، رویداد added_to_cart بعد از افزودن محصول با ایجکس اجرا می‌شود:

jQuery(document.body).on('added_to_cart', function () {
  showToast('محصول به سبد خرید اضافه شد.', 'ok');
});

برای فرم‌های Contact Form 7 هم رویداد wpcf7mailsent در دسترس است. به این ترتیب بدون افزونهٔ اضافه، بازخورد حرفه‌ای به کاربر می‌دهید.

نکات UX و دسترس‌پذیری پیام محو شونده

• زمان کافی بدهید. حداقل ۳ ثانیه، و برای پیام‌های طولانی‌تر حدود ۱ ثانیه به ازای هر ۱۰ کلمه اضافه کنید.
• پیام را کوتاه بنویسید. «ذخیره شد» بهتر از «اطلاعات شما با موفقیت در سیستم ذخیره گردید» است.
• خطا را فقط با رنگ نشان ندهید. آیکون و متن هم باید خطا بودن را برسانند؛ کاربران کم‌بینا رنگ را تشخیص نمی‌دهند.
• روی دکمه‌ها نیفتد. در موبایل، پیام نباید دکمهٔ ثابت پایین صفحه یا منوی موبایل را بپوشاند؛ در این صورت آن را بالای صفحه نمایش دهید.
• برای خطای مهم، پیام محو نشود. پیامی که کاربر باید رویش کاری انجام دهد، باید تا بسته شدن دستی باقی بماند.

اگر روی تعامل‌های کوچک سایت کار می‌کنید، دکمهٔ عضویت در خبرنامه با انیمیشن و هاور کارت سه بعدی هم مکمل خوبی برای این سورس هستند.