پلاگین modal در بوت استرپ

چاپ

پلاگین مودال(modal) در بوتسترپ

Wiki

پلاگین مودال(modal) در واقع یک پنجره ی دیالوگ و پاپ آپ است که در بالای صفحه ی جاری نمایش می یابد:

Note

نکته: پلاگین مودال را به دو صورت می توانید اضافه کنید: 

1. با اضافه کردن فایل modal.js به صورت جداگانه.

2. به طور کامل، با استفاده از فایل های bootstrap.js و یا bootstrap.min.js .


چطور می توانیم یک مودال را ایجاد کنیم؟

Wiki

مثال زیر نشان می دهد که چطور می توانیم یک مودال ابتدایی را ایجاد کنیم:

مثال

<!-- 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:

برای راه اندازی پنجره ی مودال،باید از یک دکمه یا لینک استفاده کنید.

سپس باید دو خصوصیت از نوع *-data را به صورت زیر اضافه نمایید:


توضیح بخش Modal

عنصر والد مودال، که یک <div> است، باید یک id داشته باشد که با id قرار گرفته در خصوصیت data-target برابر باشد.

کلاس modal. محتوای عنصر div ای که در آن تعریف شده است را تبدیل به یک مودال می کند و فوکس را به آن منتقل می کند. 

کلاس fade. نیز یک افکت انتقال(transition) را به مودال اضافه می کند که باعث می شود مودال در هنگام باز و بسته شدن محو شود. بنابراین اگر که نمی خواهید افکت محو شدن به مودال مورد نظر اضافه شود، این کلاس را حذف کنید.

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

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


توضیح بخش Modal content:

عنصر <div> که دارای "class="modal-content است، درواقع به مودال ما استایل می دهد و border و background-color  و ... را تنظیم می کند. در درون عنصر <div> یاد شده، قسمت های header و body و footer نیز وجود دارند. 

از کلاس modal-header. برای تعریف استایل، برای قسمت header از مودال، استفاده می شود. همان طور که مشاهده می کنید، عنصر <button> که در درون header قرار دارد، دارای یک خصوصیت "data-dismiss="modal می باشد. این خصوصیت، باعث می شود که اگر بر روی این دکمه کلیک کنید، مودال بسته شود. و کلاس close. ، دکمه ی بستن را استایل دهی می کند و کلاس modal-title. با استفاده از یک line-hight مناسب، قسمت header را استایل دهی می کند. 

از کلاس modal-body.  برای تعریف یک استایل، برای قسمت بدنه ی مودال استفاده می شود. در آن قسمت می توانید هر نوع کد اچ تی ام ال را قرار دهید مانند: پاراگراف ها و عکس ها و ویدئوها و ... .

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


اندازه ی مودال

Wiki

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

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

مودال کوچک

<div class="modal-dialog modal-sm">
خودتان امتحان کنید »

مودال بزرگ

<div class="modal-dialog modal-lg">
خودتان امتحان کنید »
Note

به طور پیش فرض، مودال ها دارای اندازه ی متوسط(medium) می باشند.