پلاگین Modal
پرش به ناوبری
پرش به جستجو
پلاگین Modal یک کادر محاوره ای (به انگلیسی: Dialog Box) یا پینجره باز شو (به انگلیسی: Popup Window) است که در بالای صفحه فعلی نمایش داده میشود:[۱]
نکته: پلاگینها را میتوان جداگانه (با استفاده از فایل مجزای “modal.js”) یا همه را با هم (با استفاده از فایل “bootstrap.js” یا bootstrap.min.js”) اضافه کرد.
نحوهٔ ایجاد یک Modal
مثال زیر نحوهٔ ایجاد یک modal ساده را نشان میدهد:
مثال
1 <!-- Trigger the modal with a button -->
2 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
3
4 <!-- Modal -->
5 <div id="myModal" class="modal fade" role="dialog">
6 <div class="modal-dialog">
7
8 <!-- Modal content-->
9 <div class="modal-content">
10 <div class="modal-header">
11 <button type="button" class="close" data-dismiss="modal">×</button>
12 <h4 class="modal-title">Modal Header</h4>
13 </div>
14 <div class="modal-body">
15 <p>Some text in the modal.</p>
16 </div>
17 <div class="modal-footer">
18 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
19 </div>
20 </div>
21
22 </div>
23 </div>
توضیح مثال
- بخش “Trigger”:
- برای راهاندازی پنجرهٔ modal، باید از یک کلید یا لینک استفاده شود.
- سپس دو ویژگی data-* اضافه شود:
data-toggle="modal"
پنجرهٔ Modal را باز میکندdata-target="#myModal"
به آیدی Modal اشاره میکند
- بخش “Modal”:
<div>
والد Modal باید یک آی دی داشته باشد که مشابه با مقدار ویژگی data-target باشد که برای راه اندازی "myModal") به کار میرود.
- کلاس
.modal
محتوای<div>
را بعنوان یک Modal شناسایی میکند و تمرکز را روی آن قرار میدهد
- کلاس
.fade
حالت انتقالی را ایجاد میکند که Modal را آشکار و محو (به انگلیسی: Fade in and out) میکند.
- اگر به این حالت نیاز ندارید میتوانید این کلاس را حذف کنید.
- ویژگی
role="dialog"
دسترس پذیری را برای کاربرانی که از صفحه خوانها (به انگلیسی: Screen Readers) استفاده میکنند بهبود میبخشد.
- کلاس
.modal-dialog
عرض و حاشیه مناسب را برای Modal تنظیم میکند.
- بخش “Modal Content”:
<div>
باclass="modal-content
به Modal استایل میدهد (کادر، رنگ پس زمینه و غیره). عنوان، بدنه و پاورقی Modal داخل این<div>
را اضافه میشود.
- کلاس
.modal-header
برای تعیین استایل عنوان Modal به کار میرود.
- عنصر
<button>
داخل عنوان یک ویژگیdata-dismiss="modal"
دارد که در صورت کلیک برروی Modal آن را میبندد. کلاس.close
به کلید بستن استایل میدهد و کلاس.modal-title
عنوان را با یک ارتفاع-خط مناسب استایل میدهد.
- کلاس
.modal-body
برای تعریف بدنه Modal به کار میرود. میتوان در اینجا هرگونه نشانهگذاری دلخواه HTML را اضاف کرد؛ پاراگرافها، تصاویر، ویدیوها و غیره.
- کلاس
.modal-footer
برای تعریف استایل پاورقی Modal استفاده میشود. توجه کنید که این ناحیه بطور پیش فرض راست-چین است.
اندازه Modal
اندازه Modal را با اضافه کردن کلاس .modal-sm
کوچک یا با کلاس .modal-lg
بزرگ کنید.
کلاس سایز را به عنصر <div>
با کلاس .modal-dialog
اضافه کنید:
Modal کوچک
<div class="modal-dialog modal-sm">
Modal بزرگ
<div class="modal-dialog modal-lg">
بطور پیش فرض اندازهٔ Modalها متوسط است.
مرجع کامل Modal بوت استرپ
برای دستیابی به مرجع کامل همه امکانات Modal، متدها و رویدادها، به مرجع Modal JS بوت استرپ ما مراجعه کنید.
منابع آموزشی