امتیاز دهید:
نحوه ایجاد modal در بوت استرپ

Modal چیست؟

Modal یک کادر pop-up است که با حالت fade و ملایمی در مواقع خاصی در بالای صفحه ی جاری ظاهر می شود، به عنوان مثال می توان زمانیکه میخواهیم یک پیغامی را به کاربر نمایش دهیم ، آن پیغام را در قالب یک modal به کاربر نمایش دهیم.

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

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

 

توضیحات کد بالا به شرح ذیل است:

بخش trigger:

برای اینکه یک modal ایجاد کنید، در ابتدا شما احتیاج دارید که یک linkیا button داشته باشید که با کلیک روی آن، آن modal باز شود.

این بخش شامل دو ویژگی است که از  data-*  استفاده کرده است؛

data-toggle="modal" یک پنجره modal را باز میکند.

data-target="#myModal" به id پنجره modal اشاره می کند.

 

بخش modal:

Div ای که حاوی modal است، باید دارای یک id باشد که با id ای که در  data-target لینک یا button استفاده شده یکی باشد. چون باید به لینک یا button بگوییم که کدام modal یا کادر محاوره ای را باز کند

کلاس modal مشخص میکند که div حاوی یک modal است.

کلاس fade یک افکت ملایم برای ورود و خروج modal ایجاد میکند، در صورتی که نمی خواهید که modal شما افکت داشته باشد، می توانید این کلاس را بردارید.

ویژگی role="dialog" خوانایی صفحه را برای افرادی که از صفحه خوان استفاده می کنند بالا می برد؛ مثل افرادی که روشن دل هستند.

کلاس modal-dialog ، عرض و margin یا فاصله مناسب modal را تعیین میکند.

 

بخش محتوای modal:

Div ای که کلاس modal-content را داراست، ویژگی های modal از جمله، رنگ پس زمینه، کادر دور آن و... را تعیین می کند؛ داخل این div میتوانید header، footer و body یا بدنه modal را اضافه کنید.

کلاس modal-header، استایلی را برای header یک modal ایجاد میکند؛ یک button داخل header وجود دارد که ویژگی data-dismiss="modal" را داراست، این وِیژگی باعث می شود که هر زمان که روی دکمه کلیک کنیم، modal بسته شود، کلاس close به دکمه close استایل می دهد و کلاس modal-title  به header یک line-height یا فاصله خط مناسبی را اعمال می کند.

کلاس modal-body استایلی را برای بدنه ی یک modal در نظر می گیرد  که داخل آن هر تگ html ای می تواند قرار گیرد مثل تصویر، ویدئو، پاراگراف و...

کلاس modal-footer استایلی را برای footer یک کادرmodal ایجاد میکند، که این بخش بصورت پیش فرض، راست چین است.

 

تغییر سایز modal:

در بوت استرپ امکان تغییر سایز modal با کلاس های modal-sm برای کادرهای محاوره ای کوچک و modal-lg برای کادرهای محاوره ای بزرگ فراهم شده که این کلاس ها باید به div ای که حاوی کلاس modal-dialog هست اضافه شود. نمونه کد را در زیر مشاهده میکنید.

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

به صورت پیش فرض modal در حالت متوسط ظاهر میشود.


نظرات
نظرات
  • موری :

    سلام. من میخوام برای استفاده از modal به جای لینک و button از input استفاده کنم ولی پنجره ی modal فقط یه لحظه روی صفحه میاد و سریعا بسته میشه. شنیدم با جاوااسکریپت و jquery راهی وجود داره که نگهش دارم وبسته نشه . ممنون میشم درباره ی اسکریپت مربوطه اش راهنمایی کنید


    1396/07/18 23:30:55

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )