سبد (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) می باشند. 



دیدگاه‌ها  

+1 # امیرکیان 1396-01-08 22:39
من میخواهم چندین مدال را به صورت همزامان در صفحه باز بکنم
و نمیخام وقتی که باز میشود صفحه ی اصلی مات بشود
آیا امکان این کار هست؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1396-01-09 09:48
درود.
در مستندات بوت استرپ، که در آدرس زیر قرار داره، نوشته شده که استفاده ی همزمان از چند مودال امکان پذیر نیست و پشتیبانی نمیشه:
getbootstrap.com/javascript/#modals
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # جمشید 1395-03-05 10:07
با سلام
و با تشکر از شما و سایت خوب شما
سوال: آیا نمایش carousel ها نیاز به modal دارند( درصورت نمایش بیرون از صفحه اصلی)
و دیگر اینکه چگونه می توان modal را هم سایز هر عکس کرد.
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-03-07 18:57
با سلام و احترام.
ادغام کامپوننت‌ها در بوت‌استرپ معمولا مشکلی ایجاد نمیکنه به شرطی که درست استفاده کنید. برای کار با carouselها بهتره لینک زیر رو یه مطالعه کنید.
http://beyamooz.com/bootstrap/367-bootstrap-tutorial/3392-bootstrap-carousel

برای هم‌سایز کردن مدال به تصویر هم باید از css استفاده کنید. شما یا باید سایز عکس رو نسبت به مدال تغییر بدید که این کار رو می‌تونید با تغییر سایز width یا height انجام بدید یا اینکه مدال رو به نسبت عکس کوچک کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

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

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

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

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