شرح صفوف ومحتوى الفقرة
لا يدعم Bootstrap 5 فتح نافذتين حواريتين متراكبتين فوق بعضهما في الوقت نفسه لما يسبّبه ذلك من تدمير لحلقة تركيز لوحة المفاتيح وتكدس طبقات التعتيم. عندما يحتاج سير العمل إلى الانتقال من نافذة أولى إلى نافذة تأكيد ثانية، أغلق الأولى أولاً ثم افتح الثانية (أو استخدم السمتين data-bs-target="#secondModal" وdata-bs-toggle="modal" على زر داخل النافذة الأولى فيتولى الإطار تبديلهما بالتسلسل النظيف).
ولنقل التركيز تلقائياً إلى حقل الإدخال الأول داخل النافذة، استمع دائماً لحدث shown.bs.modal بعد اكتمال ظهور التلاشي، وليس show.bs.modal.
مرجع كلاسات وسمات وأحداث مكوّن Modals
| الكلاس / الحدث | الموضع | السلوك القياسي في Bootstrap 5.3 |
|---|---|---|
.modal-dialog-scrollable | .modal-dialog | يجعل التمرير الطويل محصوراً داخل .modal-body فقط. |
.modal-dialog-centered | .modal-dialog | يوسّط بطاقة الحوار عمودياً في منتصف نافذة العرض. |
.modal-sm / -lg / -xl | .modal-dialog | يضبط العرض الأقصى على 300px أو 800px أو 1140px. |
.modal-fullscreen-md-down | .modal-dialog | يعرض النافذة بملء الشاشة على الجوال وضمن إطار على الحاسوب. |
event.relatedTarget | حدث show.bs.modal | يعيد مرجع الزر الذي ضغط عليه المستخدم لفتح النافذة. |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تركيب طبقات Modal الثلاث، وتفعيل الخلفية الثابتة والتمرير الداخلي والتوسيط العمودي، واختيار الأحجام ووضع ملء الشاشة المتجاوب، وحقن البيانات الآمن عبر event.relatedTarget وتسلسل النوافذ بلا تداخل. الخطوة التالية: انتقل الآن إلى درس عارض الشرائح Carousel لبناء معارض الصور المتجاوبة وأزرار ومؤشرات التنقل وتأثير التلاشي.