انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 43
دورة بوتستراب 5

النوافذ الحوارية Modal في بوتستراب 5Bootstrap 5 Modals

ابنِ النوافذ الحوارية الاحترافية Modal في بوتستراب 5 بجافاسكريبت القياسية، وأتقن طبقاتها الثلاث والخلفية الثابتة والتمرير الداخلي والتوسيط العمودي وملء الشاشة وتمرير البيانات الديناميكية وتسلسل النوافذ.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
0
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Modal Dialog Hierarchy الهيكل القياسي للنافذة الحوارية

تُستخدم النوافذ الحوارية Modals لعرض تأكيدات الحذف الحرجة، ونماذج التحرير السريعة، والتنبيهات التي تتطلب قراراً مباشراً من المستخدم دون مغادرة سياق عمله. يستبدل Bootstrap 5.3 دوال المتصفح البدائية الجامدة مثل window.alert وwindow.confirm بنوافذ أنيقة تدعم الإتاحة وكلا المظهرين الفاتح والداكن بـ Vanilla JS خالصة.

يقوم الهيكل القياسي على ثلاث طبقات متداخلة لا غنى عن أي منها: الغلاف الخارجي .modal.fade، وبداخله حاوية التموضع والأبعاد .modal-dialog، وبداخلها الصندوق الفعلي .modal-content المقسّم إلى .modal-header و.modal-body و.modal-footer.

الشجرة الهيكلية لطبقات النافذة الحوارية الثلاث في بوتستراب 5 من modal حتى modal-content

Modal Triggers and Dismiss مشغلات فتح وإغلاق النافذة

لتشغيل نافذة حوارية تصريحياً، اربط زراً يحمل السمتين data-bs-toggle="modal" وdata-bs-target="#modalId" بمعرّف النافذة. ولإغلاقها من الداخل، ضع السمة data-bs-dismiss="modal" على أيقونة .btn-close في الرأس وعلى زر الإلغاء في التذييل.

HTML 
<button class="btn btn-danger" type="button"
  data-bs-toggle="modal" data-bs-target="#delModal">
  Delete Key</button>
<div class="modal fade" id="delModal" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">
      Confirm</h5><button class="btn-close"
      data-bs-dismiss="modal"></button></div>
    <div class="modal-body">Revoke API token?</div>
  </div></div>
</div>
جرّب بنفسك

Static Backdrop Scrolling الخلفية الثابتة والتمرير الداخلي

لحماية المستخدم من إغلاق نموذج تحرير طويل بالخطأ عند النقر خارج النافذة، أضف السمتين data-bs-backdrop="static" وdata-bs-keyboard="false" على عنصر .modal؛ وعندما ينقر الزائر خارجها يمنحه بوتستراب نبضة ارتداد لطيفة تنبّهه إلى ضرورة الحفظ أو الإلغاء الصريح.

أما عند عرض شروط اتفاقية طويلة، فأضف الكلاس .modal-dialog-scrollable على .modal-dialog ليبقى رأس النافذة وتذييلها ثابتين بينما يتمرر النص داخل .modal-body فقط!

HTML 
<button class="btn btn-primary" type="button"
  data-bs-toggle="modal" data-bs-target="#termsMdl">
  Read Terms</button>
<div class="modal fade" id="termsMdl"
  data-bs-backdrop="static" tabindex="-1">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-body">Long scrollable text</div>
    </div>
  </div>
</div>
جرّب بنفسك

Vertically Centered Modals توسيط النافذة الحوارية عمودياً

تظهر النافذة افتراضياً قرب الثلث العلوي من الشاشة، ولكن في رسائل التأكيد القصيرة وتنبيهات الدفع يمكنك توسيطها عمودياً وأفقياً في منتصف نافذة المتصفح بإضافة الكلاس .modal-dialog-centered إلى .modal-dialog، ويمكن دمجه في الوقت ذاته مع .modal-dialog-scrollable.

Modal Sizes and Fullscreen أحجام النوافذ وملء الشاشة

بالإضافة إلى العرض القياسي الافتراضي البالغ 500px، يتيح بوتستراب أربعة كلاسات تحجيم توضع على .modal-dialog: الصغير .modal-sm (300px)، والكبير .modal-lg (800px)، والكبير جداً .modal-xl (1140px).

كما قدّم الإصدار الخامس ميزة ملء الشاشة .modal-fullscreen ونسخها المتجاوبة الذكية مثل .modal-fullscreen-md-down التي تملأ شاشة الهاتف بالكامل لتسهيل الكتابة باللمس، بينما تظهر كنافذة عادية مؤطرة على شاشات الحاسوب!

HTML 
<button class="btn btn-success" type="button"
  data-bs-toggle="modal" data-bs-target="#respMdl">
  Responsive Modal</button>
<div class="modal fade" id="respMdl" tabindex="-1">
  <div class="modal-dialog modal-lg
    modal-dialog-centered modal-fullscreen-md-down">
    <div class="modal-content">
      <div class="modal-body">Fullscreen on mobile!</div>
    </div>
  </div>
</div>
جرّب بنفسك

Dynamic Modal Event Data تمرير البيانات بحدث النافذة

بدلاً من توليد خمسين عنصر .modal مكرراً لكل صف في جدول المستخدمين، أنشئ نافذة حوارية واحدة فقط واقرأ الزر الذي ضغط عليه المستخدم عبر الخاصية event.relatedTarget داخل مستمع الحدث show.bs.modal!

انتبه أمنياً هنا: استخدم دائماً textContent أو input.value لحقن البيانات المقروءة داخل النافذة، ولا تستخدم innerHTML مع نصوص المستخدمين أبداً لتفادي ثغرات DOM XSS.

مخطط تمرير البيانات الديناميكية من الزر المستدعي إلى النافذة عبر حدث show.bs.modal وخاصية relatedTarget
HTML 
<button class="btn btn-outline-primary" type="button"
  data-bs-toggle="modal" data-bs-target="#msgMdl"
  data-bs-recipient="@sara">Message Sara</button>
<div class="modal fade" id="msgMdl" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-body">
      <input id="recInput" class="form-control">
    </div>
  </div></div>
</div>
جرّب بنفسك

Modal Focus and Sequencing حفظ التركيز ومنع تداخل النوافذ

لا يدعم 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 لبناء معارض الصور المتجاوبة وأزرار ومؤشرات التنقل وتأثير التلاشي.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Modal Dialog النافذة الحوارية المنبثقة
طبقة حوارية تركز انتباه المستخدم فوق الصفحة مع خلفية معتمة لتأكيد العمليات الحساسة أو تحرير البيانات.
للمراجعة
02 Scrollable Modal Dialog النافذة ذات التمرير الداخلي
كلاس يثبّت رأس النافذة وأزرار التذييل ويجعل شريط التمرير يتحرك داخل جسم النافذة فقط.
للمراجعة
03 Related Target (event.relatedTarget) العنصر المستدعي للحدث
خاصية برمجية في كائن حدث الفتح تعيد مرجع الزر الفعلي الذي ضغط عليه المستخدم لتخصيص محتوى النافذة.
للمراجعة
04 Fullscreen Breakpoint Modal نافذة ملء الشاشة المتجاوبة
كلاسات توسّع النافذة لتغطي كامل شاشة الجوال الصغيرة وتعيدها لإطارها المعتاد على الشاشات الأكبر.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 XSS XSS
Cross-Site Scripting
ثغرة حقن شيفرات خبيثة نمنعها باستخدام textContent بدلاً من innerHTML عند تحديث عناوين وحقول النافذة.
للمراجعة
02 ARIA ARIA
Accessible Rich Internet Applications
سمات الإتاحة القياسية التي تربط النافذة بعنوانها وتخفيها عن قارئات الشاشة حال إغلاقها.
للمراجعة
03 DOM DOM
Document Object Model
شجرة المستند التي يُنصح بوضع عناصر النافذة في مستواها الأعلى لتجنب مشاكل الطبقات.
للمراجعة
04 SLA SLA
Service Level Agreement
مثال عملي للنصوص الطويلة التي تُعرض بانتظام داخل نافذة ذات تمرير داخلي.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ نافذة modal.fade تحمل سمة data-bs-backdrop="static" وبداخلها عنصر modal-dialog-centered يضم رأساً وجسماً وتذييلاً بزري إلغاء وتأكيد.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. اربط زرين يحملان قيمتين مختلفتين في سمة data-bs-item بنفس النافذة editItemModal، وحدّث عنوان النافذة بأمان عبر textContent داخل حدث show.bs.modal.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

على أي طبقة من طبقات النافذة توضع كلاسات التحجيم modal-lg والتوسيط modal-dialog-centered؟

تُطبّق جميع كلاسات الحجم والتوسيط والتمرير وملء الشاشة حصراً على عنصر modal-dialog.

02

أي كلاس يحصر شريط التمرير داخل جسم النافذة modal-body مع بقاء الرأس والتذييل ثابتين؟

يضبط كلاس modal-dialog-scrollable أقصى ارتفاع للحوار ليتمرر المحتوى الداخلي بسلاسة.

03

كيف تتعرف برمجياً على الزر المحدد الذي فتح النافذة المشتركة داخل حدث show.bs.modal؟

يمرّر بوتستراب مرجع الزر المسبب للفتح تلقائياً داخل خاصية event.relatedTarget.

04

ما الكلاس الذي يجعل النافذة تملأ كامل الشاشة تحت عرض 768px وتبقى مؤطرة على الشاشات الأكبر؟

تفعّل لاحقة md-down وضع ملء الشاشة للشاشات الأصغر من نقطة التوقف المتوسطة md.

05

يوصي بوتستراب 5 رسمياً بفتح نافذتين أو ثلاث نوافذ حوارية متراكبة فوق بعضها في اللحظة نفسها.

يمنع بوتستراب تداخل النوافذ المفتوحة معاً حفاظاً على سلامة التركيز وتجربة المستخدم.

06

لنقل التركيز تلقائياً إلى حقل إدخال داخل النافذة بشكل موثوق، يجب الاستماع للحدث shown.bs.modal بعد انتهاء حركة الظهور.

بعد انطلاق الحدث shown.bs.modal تكون حركة التلاشي قد اكتملت فيستقبل الحقل التركيز دون فشل.

07

لماذا يجب إدراج النصوص المقروءة من سمات الأزرار عبر خاصية textContent بدلاً من innerHTML؟

تعامل خاصية textContent المدخلات كنص حرفي آمن ولا تفسرها كوسوم أو سكريبتات تنفيذية.

08

ضبط سمة data-bs-backdrop="static" يمنع إغلاق النافذة عند نقر المستخدم بالخطأ خارج حدودها.

تثبّت القيمة static النافذة وتنبه المستخدم بارتداد خفيف بدلاً من إضاعة مدخلاته.