Bootstrap 5 النافذة المنبثقة

نافذة الإعلان

نافذة الإعلان (Popover) مكونة من جزء من التوجيهات؛ هي نافذة تظهر عند ضغط المستخدم على العنصر. الفرق بينها وبين التوجيهات هو أن نافذة الإعلان يمكن أن تحتوي على مزيد من المحتويات.

كيفية إنشاء نافذة إعلان

لإنشاء نافذة إعلان، يرجى data-bs-toggle="popover" لإضافة هذا العنصر إلى العنصر.

استخدم title يحدد هذا العنصر نص عنوان نافذة الإعلان، ويستخدم data-bs-content يحدد هذا العنصر النص الذي سيُعرض في نص نافذة الإعلان:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="عنوان نافذة الإعلان" data-bs-content="بعض المحتويات في نافذة الإعلان">إيقاف تشغيل نافذة الإعلان</button>

ملاحظة:يحتاج نافذة الإعلان إلى تعريف باستخدام JavaScript ليكون قابلاً للتشغيل.

يُمكن تفعيل جميع نافذات الإعلان في المستند التالي:

مثال

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

جربها بنفسك

تحديد موقف نافذة الإعلان

بالتقديم، ستظهر نافذة الإعلان على الجانب الأيمن للعنصر.

استخدم data-bs-placement إعداد موقف نافذة الإعلان في الجانب العلوي، السفلي، الجانب الأيسر أو الجانب الأيمن للعنصر:

مثال

<a href="#" title="الرأس" data-bs-toggle="popover" data-bs-placement="top" data-content="المحتوى">ال cima</a>
<a href="#" title="الرأس" data-bs-toggle="popover" data-bs-placement="bottom" data-content="المحتوى">الأسفل</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="المحتوى">اليسار</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="المحتوى">اليمين</a>

جربها بنفسك

ملاحظة:إذا لم يكن هناك مساحة كافية، لن يعمل خاصية الموضع كما هو متوقع. على سبيل المثال: إذا كنت تستخدم خاصية الموضع العلوي (بدون مساحة احتياطية) على الصفحة العليا، فإن النافذة الإشعار ستظهر تحت العنصر أو إلى اليمين (في أي مكان هناك مساحة)

إغلاق نافذة الإشعار

بشكل افتراضي، سيتم إغلاق النافذة الإشعار عند النقر مرة أخرى على العنصر. ولكن يمكنك استخدام data-bs-trigger="focus" خصائص، يمكنك تعيين هذه الخاصية لإغلاق النافذة الإشعار بالنقر خارج العنصر:

مثال

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="إغلاق النافذة الإشعار بالنقر على أي مكان في المستند">انقر هنا</a>

جربها بنفسك

نافذة الإشعار عند التمرير

تنبيه:إذا كنت ترغب في عرض نافذة الإشعار عند تحريك مؤشر الفأرة فوق العنصر، استخدم قيمة "hover" ال data-bs-trigger خصائص:

مثال

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="نص نافذة الإشعار">أوقف التمرير فوقي</a>

جربها بنفسك