پلاگین Modal

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷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 بوت استرپ ما مراجعه کنید.


منابع آموزشی