%45 تخفیف، با کد Fetr روی تمام آموزش ها، بمناسبت عید سعید فطر
زمان باقی مانده
سبد (0)

تبلیغات

پلاگین 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 را به صورت زیر اضافه نمایید:

  • برای باز کردن پنجره ی مودال : "data-toggle="modal
  • برای اشاره کردن به آی دی مودال: "data-target="#myModal

توضیح بخش 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) می باشند. 



آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان