الرئيسية
الصفحة الرئيسية
في هذه الصفحة
المودال الأساسي خلفية ثابتة (Static) محتوى طويل (Scrolling) توسيط عمودي (Centered) الأحجام المختلفة كامل الشاشة (Fullscreen)
صفحات أخرى
الأزرار التنبيهات التحميل الشارات الكاروسيل

المودال (Modal)

نوافذ منبثقة تفاعلية لعرض التنبيهات، أو نوافذ تسجيل الدخول، أو تفاصيل إضافية دون مغادرة الصفحة الأصلية.

التوثيق الرسمي

1. المودال الأساسي (Basic Modal)

يتطلب زراً لتفعيله (يحتوي على data-bs-toggle="modal" و data-bs-target).

المعاينة
شرح الكود:
  • data-bs-toggle="modal": نخبر الزر أن وظيفته هي فتح مودال.
  • data-bs-target="#exampleModal": اسم الـ ID الخاص بالمودال المراد فتحه.
  • modal fade: حاوية المودال الأساسية. fade لتأثير الظهور الناعم.
  • modal-dialog: الحاوية التي تحدد حجم المودال وتموضعه في الشاشة.
  • modal-content: الصندوق الفعلي الذي يحتوي على الخلفية البيضاء والحواف. ينقسم إلى modal-header (للعنوان) و modal-body (للمحتوى) و modal-footer (للأزرار).
  • data-bs-dismiss="modal": أي زر يحمل هذه الخاصية سيقوم بإغلاق المودال عند الضغط عليه (مثل زر X أو زر "إغلاق").

2. خلفية ثابتة (Static Backdrop)

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

المعاينة
شرح الكود:
  • data-bs-backdrop="static": تمنع إغلاق المودال عند النقر على الخلفية المعتمة خلفه. بدلاً من الإغلاق، سيقوم المودال بالاهتزاز لتنبيه المستخدم.
  • data-bs-keyboard="false": تمنع إغلاق المودال عند الضغط على زر (Escape) في لوحة المفاتيح.

3. محتوى طويل (Scrolling Modal)

إذا كان المحتوى طويلاً جداً، أضف modal-dialog-scrollable ليصبح الشريط الجانبي (Scrollbar) بداخل المودال نفسه، ويبقى الرأس والتذييل ثابتين.

المعاينة
شرح الكود:
  • modal-dialog-scrollable: يتم إضافتها لـ `modal-dialog`. وظيفتها جعل الـ `modal-body` هو الجزء الوحيد القابل للتمرير (Scroll)، بينما يبقى العنوان في الأعلى (Header) وأزرار الموافقة في الأسفل (Footer) ظاهرة وثابتة طوال الوقت!

4. التوسيط العمودي (Vertically Centered)

المودال الافتراضي يظهر في أعلى الشاشة. أضف modal-dialog-centered لتوسيطه تماماً في وسط الشاشة.

المعاينة
شرح الكود:
  • modal-dialog-centered: تقوم بوضع المودال في منتصف الشاشة (أفقياً وعمودياً) ليكون مناسباً لرسائل التأكيد (Success/Error).
  • قمنا في هذا المثال بحذف modal-footer وبسطنا تصميم الهيدر (border-0) لعمل نافذة تأكيد نظيفة وجميلة.

5. الأحجام (Sizes)

أضف modal-sm للنافذة الصغيرة، أو modal-lg، أو modal-xl للكبيرة.

المعاينة
شرح الكود:
  • modal-sm (300px)، modal-lg (800px)، modal-xl (1140px): كلاسات الأحجام يتم وضعها دائماً بجانب modal-dialog، وهي تغير من أقصى عرض (max-width) للنافذة.

6. كامل الشاشة (Fullscreen)

استخدم modal-fullscreen لفتح مودال يملأ كامل الشاشة بدون حواف. ممتاز للموبايل.

المعاينة
شرح الكود:
  • modal-fullscreen: يحول المودال من مجرد نافذة منبثقة إلى شاشة كاملة (Overlay) تلغي الزوايا المدورة والمسافات الخارجية تماماً.
  • يمكنك أيضاً استخدام modal-fullscreen-md-down لجعلها شاشة كاملة على الموبايل فقط، وتعود نافذة صغيرة على الكمبيوتر!