Bootstrap

Bootstrap 4 Modal

ستتعلم في هذا الدرس كيفية اظهار نافذة المحادثة dialog box/popup window باستخدام ال Bootstrap 

التاريخ

07 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1079

المواضيع

6
الشروحات chevron_left Bootstrap 4 Modal chevron_left Bootstrap

Bootstrap 4 Modal

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> Bootstrap 4 Modal

ال Modal هو نافذة المحادثة dialog box/popup window تظهر في نفس الصفحة عند الضغط علي button

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

</> Modal Animation

استخدم ال fade class لعمل effect علي ال modal

<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

</> Modal Size

يتم تغيير حجم ال modal عن طريق ال classes الاتيه

  • modal-sm
  • modal-lg
  • modal-xl
<div class="modal-dialog modal-sm">
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-xl">

</> Centered Modal

يتوسط الصفحة افقي ورأسي ال Model عن طريق modal-dialog-centered class

<div class="modal-dialog modal-dialog-centered">

</> Scrolling Modal

عندما يكون لديكم محتوي كبير جدا داخل ال Model فان جزء من المحتوي سوف يختفي في اطراف الصفحه السفلية 

فلذلك نستخدم ال  modal-dialog-scrollable classes و modal-dialog لعمل scroll داخل ال model

modal-dialog

<div class="modal-dialog">

modal-dialog and modal-dialog-scrollable

<div class="modal-dialog modal-dialog-scrollable">
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات