Bootstrap 4 Modal
ستتعلم في هذا الدرس كيفية اظهار نافذة المحادثة dialog box/popup window باستخدام ال Bootstrap
التاريخ
07 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1079
المواضيع
6
Bootstrap 4 Modal
</> 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 and modal-dialog-scrollable
<div class="modal-dialog modal-dialog-scrollable">