الإغلاق التلقائي بالنقر الخارجي | البالونات المنبثقة Popovers في بوتستراب 5

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

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

السلوك الافتراضي للبالون المنبثق يتطلب من المستخدم النقر مرةً ثانية على نفس الزر لإغلاقه، وهو ما قد يربك الزائر المعتاد على إغلاق القوائم بمجرد النقر في أي فراغ بالصفحة! لحل ذلك رسمياً في Bootstrap 5، نستخدم نمط الإغلاق بالتركيز Dismiss on next click عبر إضافة data-bs-trigger="focus".

انتبه لشرط التوافق الجوهري عبر كافة المتصفحات (وخاصةً Safari على نظامي macOS وiOS): للحصول على إغلاق خارجي موثوق بسمة data-bs-trigger="focus"، استخدم وسم <a tabindex="0" role="button"> بدلاً من <button> حتى يطلق المتصفح حدث فقدان التركيز blur بشكل متسق عند النقر بعيداً.

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

HTML

<a tabindex="0" class="btn btn-warning" role="button"
  data-bs-toggle="popover" data-bs-trigger="focus"
  data-bs-title="Dismissible Popover"
  data-bs-content="Click anywhere outside to close!">
  Click Then Click Outside
</a>

جرّب بنفسك

الصف 3 معاينة حية

Dismiss on Next Click الإغلاق التلقائي بالنقر الخارجي

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

جميع فقرات هذا الدرس (البالونات المنبثقة Popovers في بوتستراب 5)