Modal در Bootstrap ورژن 4
یادگیری Bootstrapجزء Modal یک جعبه محاوره ای / پنجره ای است که در بالای صفحه فعلی نمایش داده می شود:
Open modal
چگونه یک Modal ایجاد کنیم
مثال زیر نشان می دهد که چگونه یک Modal ساده ایجاد کنید:
<!-- 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 fade" 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
تغییر اندازه Modal با افزودن کلاس modal-sm برای modal کوچک یا کلاس modal-lg برای modals بزرگ.
کلاس اندازه را به عنصر <div> با کلاس modal-dialog اضافه کنید.
<div class="modal-dialog modal-sm">
مشاهده مثال
<div class="modal-dialog modal-lg">
مشاهده مثالبه طور پیش فرض، Modal ها در اندازه متوسط هستند.
Modal متمرکز
محدوده مدال را به صورت عمودی و افقی داخل صفحه، با کلاس .modal-dialog-centered:قرار دهید
<div class="modal-dialog modal-dialog-centered">
مشاهده مثال
نظر شما
>