إظهار وإخفاء الإشعار برمجياً | الإشعارات العائمة Toasts في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تُعدّ الإشعارات العائمة ميزة اختيارية التهيئة Opt-in تُشغَّل عقب نجاح استجابة الخادم (مثل طلب fetch لحفظ الإعدادات)؛ فلا نربطها بسمة فتح HTML تلقائية، بل نستدعي الدالة الآمنة bootstrap.Toast.getOrCreateInstance(toastEl) في جافاسكريبت القياسية ثم ننفّذ .show().

توفر الإضافة أيضاً أحداث دورة حياة دقيقة تشمل show.bs.toast وshown.bs.toast وhide.bs.toast وhidden.bs.toast، ما يمكّنك من تنظيف عناصر الإشعار المولّدة ديناميكياً من DOM فور اكتمال تلاشيها.

الصف 2 كود برمجي

HTML

<button id="saveBtn" class="btn btn-primary" type="button">
  Save Profile</button>
<div id="saveToast" class="toast mt-3" role="status">
  <div class="toast-header">
    <strong class="me-auto">System</strong>
    <button type="button" class="btn-close"
      data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">Changes saved!</div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Showing Toasts via JS API إظهار وإخفاء الإشعار برمجياً

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الإشعارات العائمة Toasts في بوتستراب 5)