پلاگین Modal

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	شروع
۳	شبکه‌بندی ساده
۴	تایپوگرافی
۵	جدول‌ها
۶	تصویر‌ها
۷	Jumbotron
۸	Well‌ها
۹	هشدارها
۱۰	کلیدها
۱۱	گروه‌های کلید
۱۲	گلیف آیکون‌ها
۱۳	نشان‌ها/برچسب‌ها
۱۴	نوار پیشرفت
۱۵	صفحه‌بندی
۱۶	Pager
۱۷	گروه‌های لیست
۱۸	پنل‌ها
۱۹	منوهای کرکره‌ای
۲۰	Collapse
۲۱	تب‌ها/Pillها
۲۲	نوار راهبری
۲۳	فرم‌ها
۲۴	ورودی‌ها
۲۵	ورودی‌ها ۲
۲۶	سایزدهی ورودی
۲۷	Media Objectها
۲۸	Carousel
۲۹	Modal
۳۰	راهنمای ابزار
۳۱	Popover
۳۲	Scrollspy
۳۳	Affix
۳۴	فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

پلاگین 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">&times;</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-* اضافه شود:

1. data-toggle="modal" پنجرهٔ Modal را باز می‌کند
2. 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 بوت استرپ ما مراجعه کنید.

صفحهٔ بعد»

«صفحهٔ قبل