Bootstrap 4 Modal

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

HTML

<!-- 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

HTML

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

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

جرّب بنفسك

Modal Size

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

modal-sm
modal-lg
modal-xl

HTML

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

جرّب بنفسك

HTML

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

جرّب بنفسك

HTML

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

جرّب بنفسك

Centered Modal

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

HTML

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

جرّب بنفسك

Scrolling Modal

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

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

modal-dialog

HTML

<div class="modal-dialog">

جرّب بنفسك

modal-dialog and modal-dialog-scrollable

HTML

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

جرّب بنفسك

Bootstrap 4 Modal