إطار Bootstrap 5

الإشعارات والنوافذ المنبثقة الصغيرة

13 دقيقة الدرس 32 من 40

الإشعارات والنوافذ المنبثقة الصغيرة في Bootstrap 5

الإشعارات (Toasts) هي إشعارات خفيفة مصممة لتحاكي الإشعارات الفورية. النوافذ المنبثقة الصغيرة (Popovers) هي صناديق صغيرة توفر معلومات إضافية عند تفعيلها. كلاهما ضروريان لتحسين تجربة المستخدم.

إشعارات Toast

الإشعارات هي تنبيهات غير تطفلية تظهر مؤقتًا وتختفي تلقائيًا.

<!-- إشعار أساسي -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="icon.svg" class="rounded me-2" alt="أيقونة">
        <strong class="me-auto">Bootstrap</strong>
        <small>منذ 11 دقيقة</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="إغلاق"></button>
    </div>
    <div class="toast-body">
        مرحبًا بالعالم! هذه رسالة إشعار.
    </div>
</div>

<!-- زر لتفعيل الإشعار -->
<button type="button" class="btn btn-primary" id="liveToastBtn">إظهار الإشعار</button>

<script>
const toastTrigger = document.getElementById('liveToastBtn');
const toastElement = document.querySelector('.toast');

if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
        const toast = new bootstrap.Toast(toastElement);
        toast.show();
    });
}
</script>
        

ملاحظة: على عكس النوافذ المنبثقة، تتطلب الإشعارات تهيئة بجافا سكريبت. لا تظهر تلقائيًا بدون استدعاء .show().

متغيرات ألوان الإشعارات

استخدم أدوات الخلفية والنص لتنسيق الإشعارات.

<!-- إشعار نجاح -->
<div class="toast align-items-center text-bg-success border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            تمت العملية بنجاح!
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- إشعار خطأ -->
<div class="toast align-items-center text-bg-danger border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            خطأ! حدث خطأ ما.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- إشعار تحذير -->
<div class="toast align-items-center text-bg-warning border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            تحذير! يرجى مراجعة إدخالك.
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- إشعار معلومات -->
<div class="toast align-items-center text-bg-info border-0" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            التحديثات الجديدة متاحة.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>
        

تحديد موضع الإشعارات

ضع الإشعارات باستخدام حاويات مع CSS مخصص أو فئات الأدوات.

<!-- حاوية الإشعارات (أعلى-يسار في RTL) -->
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast" role="alert">
        <div class="toast-header">
            <strong class="me-auto">إشعار</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            موضع أعلى-يسار
        </div>
    </div>
</div>

<!-- أسفل-يمين -->
<div class="toast-container position-fixed bottom-0 start-0 p-3"></div>

<!-- أعلى-وسط -->
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3"></div>

<!-- أسفل-وسط -->
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3"></div>

<!-- منتصف-وسط -->
<div class="toast-container position-fixed top-50 start-50 translate-middle p-3"></div>
        

تكديس الإشعارات

تتراكم الإشعارات المتعددة عموديًا داخل حاويتها.

<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast show" role="alert">
        <div class="toast-header">
            <strong class="me-auto">الإشعار الأول</strong>
            <small>الآن</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            هذه رسالة الإشعار الأولى.
        </div>
    </div>

    <div class="toast show" role="alert">
        <div class="toast-header">
            <strong class="me-auto">الإشعار الثاني</strong>
            <small>منذ دقيقتين</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            هذه رسالة الإشعار الثانية.
        </div>
    </div>
</div>
        

خيارات الإشعارات وجافا سكريبت

قم بتكوين سلوك الإشعارات باستخدام خيارات جافا سكريبت.

<script>
// الحصول على عنصر الإشعار
const toastEl = document.getElementById('myToast');

// إنشاء إشعار مع خيارات
const toast = new bootstrap.Toast(toastEl, {
    animation: true,    // تفعيل حركة التلاشي
    autohide: true,     // الإخفاء التلقائي بعد التأخير
    delay: 5000         // التأخير بالمللي ثانية (الافتراضي 5000)
});

// إظهار الإشعار
toast.show();

// إخفاء الإشعار
toast.hide();

// التخلص من نسخة الإشعار
toast.dispose();

// مستمعي الأحداث
toastEl.addEventListener('show.bs.toast', function () {
    console.log('الإشعار على وشك الظهور');
});

toastEl.addEventListener('shown.bs.toast', function () {
    console.log('الإشعار ظهر بالكامل');
});

toastEl.addEventListener('hide.bs.toast', function () {
    console.log('الإشعار على وشك الاختفاء');
});

toastEl.addEventListener('hidden.bs.toast', function () {
    console.log('الإشعار اختفى بالكامل');
});
</script>
        

أساسيات Popovers

تعرض النوافذ المنبثقة الصغيرة معلومات إضافية عند النقر أو التمرير على عنصر.

<!-- Popover أساسي -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-title="عنوان النافذة"
    data-bs-content="هذا هو محتوى النافذة المنبثقة.">
    انقر للتبديل
</button>

<!-- تهيئة جميع النوافذ المنبثقة -->
<script>
// تحتاج النوافذ المنبثقة إلى التهيئة
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>
        

مهم: يجب تهيئة النوافذ المنبثقة بجافا سكريبت قبل أن تعمل. أضف سكريبت التهيئة لتفعيل النوافذ المنبثقة.

اتجاهات النوافذ المنبثقة

تحكم في موضع النوافذ المنبثقة باستخدام خاصية data-bs-placement.

<!-- أعلى -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="top"
    data-bs-content="نافذة أعلى">
    نافذة في الأعلى
</button>

<!-- يمين -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="right"
    data-bs-content="نافذة يمين">
    نافذة على اليمين
</button>

<!-- أسفل (افتراضي) -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="bottom"
    data-bs-content="نافذة أسفل">
    نافذة في الأسفل
</button>

<!-- يسار -->
<button type="button" class="btn btn-secondary"
    data-bs-toggle="popover"
    data-bs-placement="left"
    data-bs-content="نافذة يسار">
    نافذة على اليسار
</button>
        

مفعلات النوافذ المنبثقة

خصص كيفية تفعيل النوافذ المنبثقة.

<!-- تفعيل بالنقر (افتراضي) -->
<button type="button" class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-trigger="click"
    data-bs-content="انقر للإظهار/الإخفاء">
    تفعيل بالنقر
</button>

<!-- تفعيل بالتمرير -->
<button type="button" class="btn btn-success"
    data-bs-toggle="popover"
    data-bs-trigger="hover"
    data-bs-content="مرر للإظهار">
    تفعيل بالتمرير
</button>

<!-- تفعيل بالتركيز -->
<button type="button" class="btn btn-info"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-content="التركيز للإظهار">
    تفعيل بالتركيز
</button>

<!-- تفعيل يدوي -->
<button type="button" class="btn btn-warning" id="manualPopover"
    data-bs-toggle="popover"
    data-bs-trigger="manual"
    data-bs-content="يتم التحكم عبر جافا سكريبت">
    تفعيل يدوي
</button>

<script>
// التحكم اليدوي
const manualPopover = new bootstrap.Popover(document.getElementById('manualPopover'));
// إظهار: manualPopover.show();
// إخفاء: manualPopover.hide();
</script>
        

نافذة منبثقة قابلة للإغلاق

أنشئ نوافذ منبثقة تختفي عند النقر خارجها.

<button type="button" class="btn btn-danger"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-title="نافذة قابلة للإغلاق"
    data-bs-content="انقر في أي مكان خارجها للإغلاق">
    نافذة قابلة للإغلاق
</button>
        

نصيحة: استخدم data-bs-trigger="focus" لإنشاء نوافذ منبثقة قابلة للإغلاق تختفي عند النقر خارجها.

نافذة منبثقة مع محتوى HTML

قم بتضمين محتوى HTML داخل النوافذ المنبثقة.

<button type="button" class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-html="true"
    data-bs-title="<strong>عنوان HTML</strong>"
    data-bs-content="<p>هذا محتوى <em>HTML</em>!</p><a href='#'>انقر هنا</a>">
    نافذة مع HTML
</button>

<!-- أو عبر جافا سكريبت -->
<script>
const popover = new bootstrap.Popover(element, {
    html: true,
    title: '<strong>عنوان HTML</strong>',
    content: '<p>محتوى <em>HTML</em></p>'
});
</script>
        

تحذير أمني: كن حذرًا عند استخدام محتوى HTML في النوافذ المنبثقة، خاصة إذا كان المحتوى يأتي من إدخال المستخدم. قم دائمًا بتعقيم HTML المقدم من المستخدم لمنع هجمات XSS.

خيارات النوافذ المنبثقة

خيارات تكوين متقدمة للنوافذ المنبثقة.

<script>
const popover = new bootstrap.Popover(element, {
    animation: true,           // تطبيق انتقال التلاشي
    container: 'body',         // الإلحاق بعنصر محدد
    delay: 0,                  // تأخير الإظهار/الإخفاء (مللي ثانية)
    html: false,               // السماح بمحتوى HTML
    placement: 'right',        // موضع النافذة
    trigger: 'click',          // كيفية تفعيل النافذة
    title: 'عنوان النافذة',    // نص العنوان
    content: 'المحتوى هنا',   // نص الجسم
    offset: [0, 8],           // الإزاحة من الهدف
    fallbackPlacements: ['top', 'bottom']  // المواضع البديلة
});
</script>
        

تمرين عملي

المهمة: أنشئ نظام إشعارات بالميزات التالية:

أربعة أزرار: نجاح، خطأ، تحذير، معلومات
كل زر يظهر إشعار ملون في الزاوية العلوية اليسرى
يجب أن تختفي الإشعارات تلقائيًا بعد 4 ثوانٍ
أضف أيقونات ورسائل مناسبة لكل نوع
قم بتضمين زر "مسح الكل" يخفي جميع الإشعارات المرئية

تحدي إضافي: أنشئ بطاقة ملف مستخدم مع نوافذ منبثقة متعددة:

مرر فوق الصورة الرمزية لإظهار السيرة الذاتية الكاملة
انقر على أيقونة البريد الإلكتروني لإظهار العنوان الكامل
انقر على أيقونة المعلومات لإظهار تفاصيل الحساب
يجب أن يكون لكل نافذة منبثقة تنسيق مناسب

أفضل الممارسات

استخدم الإشعارات للتنبيهات غير الحرجة التي لا تتطلب إجراءً من المستخدم
اجعل رسائل الإشعارات موجزة وواضحة
ضع الإشعارات بشكل متسق (عادةً أعلى-يسار أو أسفل-يسار في RTL)
لا تغمر المستخدمين بعدد كبير من الإشعارات المتزامنة
دائمًا قم بتهيئة النوافذ المنبثقة والتلميحات بجافا سكريبت
استخدم النوافذ المنبثقة للمعلومات التكميلية وليس المحتوى الحرج
تأكد من أن النوافذ المنبثقة لا تحجب عناصر واجهة المستخدم المهمة
اختبر موضع النوافذ المنبثقة على أحجام شاشات مختلفة
وفر طرقًا بديلة للوصول إلى محتوى النافذة المنبثقة لسهولة الوصول