Bootstrap 4 Modal
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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">
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
