انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: النوافذ الحوارية Modal في بوتستراب 5

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

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

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

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

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

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

الصف 2 كود برمجي
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>
جرّب بنفسك

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