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

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

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

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

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

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

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

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

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