Modal

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

مؤلفه Modal یک کادر محاوره‌ای (به انگلیسی: Dialog Box) یا پنجره باز شو (به انگلیسی: Popup Window) است که در بالای صفحه فعلی نمایش داده می‌شود:[۱]

نحوه ایجاد Modal

مثال زیر نحوهٔ ایجاد یک modal ساده را نشان می‌دهد:

مثال

 1 <!-- Button to Open the Modal -->
 2 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 3   Open modal
 4 </button>
 5 
 6 <!-- The Modal -->
 7 <div class="modal" id="myModal">
 8   <div class="modal-dialog">
 9     <div class="modal-content">
10 
11       <!-- Modal Header -->
12       <div class="modal-header">
13         <h4 class="modal-title">Modal Heading</h4>
14         <button type="button" class="close" data-dismiss="modal">&times;</button>
15       </div>
16 
17       <!-- Modal body -->
18       <div class="modal-body">
19         Modal body..
20       </div>
21 
22       <!-- Modal footer -->
23       <div class="modal-footer">
24         <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
25       </div>
26 
27     </div>
28   </div>
29 </div>


مشاهدهٔ نتیجه


اضافه کردن حالت متحرک (به انگلیسی: Animation)

برای ایجاد حالت محو شدن (به انگلیسی: Fading) به هنگام باز یا بسته شدن modal از کلاس .fade استفاده کنید:

مثال

1 <!-- Fading modal -->
2 <div class="modal fade"></div>
3 
4 <!-- Modal without animation -->
5 <div class="modal"></div>


مشاهدهٔ نتیجه


اندازه Modal

اندازه Modal را با اضافه کردن کلاس .modal-sm کوچک، با کلاس .modal-lg بزرگ یا با اضافه کردن .modal-xl خیلی بزرگ کنید.

کلاس سایز را به عنصر <div> با کلاس .modal-dialog اضافه کنید:

Modal کوچک

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


مشاهدهٔ نتیجه


Modal بزرگ

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


مشاهدهٔ نتیجه


Modal خیلی بزرگ

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


مشاهدهٔ نتیجه

بطور پیش فرض اندازهٔ modalها متوسط است.

Modal وسط‌چین

با استفاده از کلاس .modal-dialog-centered را بصورت افقی یا عمودی در صفحه وسط-چین کنید:

مثال

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


مشاهدهٔ نتیجه


پیمایش (به انگلیسی: Scrolling Modal)

زمانی که محتوای زیادی داخل modal دارید، به صفحه یک نوار پیمایش (به انگلیسی: Scrollbar) اضافه می‌شود. برای درک این مسئله مثال‌های زیر را مشاهده کنید:

مثال

<div class="modal-dialog">


مشاهدهٔ نتیجه


با این حال، می‌توان با اضافه کردن .modal-dialog-scrollable به .modal-dialog به جای کل صفحه، scroll را فقط در داخل modal ایجاد کنیم:

مثال

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


مشاهدهٔ نتیجه


مرجع کامل Modal بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Modal، متدها و رویداد ها(Events)، به مرجع Modal JS بوت استرپ ما مراجعه کنید.


منابع آموزشی