Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--استفاده از پلاگین Modal در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت پانزدهم آموزش در زیر قرار داده شده است.

استفاده از پلاگین Modal  در بوت استرپ                                           قسمت پانزدهم

این پلاگین یک پنجره یا جعبه محاوره ایست که در بالای صفحه نمایش فعلی داده می شود

چگونه یک modal ایجاد کنیم ؟

 بخش اول  (The "Trigger" part):

  برای استفاده از پلاگین modal ابتدا نیاز به یک link یا button داریم که باید دو خصوصیت

"data-toggle="modal و "data-target="#myModa را به آن اختصاص بدهیم.

 

بخش دوم  (The "Modal" part):

  •  یک <Div> والد یا Parent در نظر میگیریم و ID که به آن اختصاص میدهیم را در خصوصیت data-target لینک یا button مان قرار می دهیم
  • سپس به Div والدمان کلاس modal. را اختصاص می دهیم
  • همچنین برای ایجاد Transion به داخل و خارج در هنگام باز و بسته شدن Modal می توانید از کلاس fade. استفاده کنید , در صورتی که نیاز به افکت ندارید می توانید از این کلاس استفاده نکنید
  • استفاده از نقش یا role به صورت "role="dialog بهبود خوانایی صفحه را برای کسانی که از screen readers استفاده می کنند افزایش می دهد
  • سپس  Div دیگری مینویسیم و کلاس modal-dialog. را به آن اختصاص می دهیم
  • کلاس  modal-dialog. یک Width وMargin  یا حاشیه را برای Modal ایجاد میکند

 

 بخش سوم (The "Modal content" part) :

  • یک Div با کلاس "class="modal-content که شامل ...(Style(border, background-color, etc های می باشد ایجاد می کنیم  که درون این Div عناصر  مودال header , body , footer  قرار می گیرد
  • کلاس modal-header. برای تعریف کردن header مودال استفاده می شود
  • درون Header یک Button  قرار دارد که برای ایجاد آیکن بسته شدن پنجره Modal که به صورت یک آیکن ضرب است می باشد
  • خصوصیت "data-dismiss="modal در Button خصوصیتی است که پنجره مدال را در هنگام کلیک شدن خواهد بست
  • برای ایجاد آیکن Close از کلاس close. استفاده میکنیم
  • اگر به المانی که متن Header را در آن نوشته ایم کلاس modal-title. را اضافه کنیم به متن ما سبک یک تیتیر داده و حاشیه آن را تعیین می کند
  •  کلاس modal-body. بدنه Modal را تعریف می کند که محتویات مودال که می تواند شامل paragraphs, images, videos, etc  باشد درون آن قرار می گیرد
  •  کلاس modal-footer.  نیز footer  مودالمان را تعریف می کند

 

مثال زیر تمام توضیحات بالا را در خود جا داده است :

  <div class="container">

  <h2>Modal Example</h2>

  <!-- 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 class="modal fade" id="myModal" 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>

</div>

اجرای کد بالا به صورت زیر می باشد :

 

6358370980890603101.png

 

 

 

 

 

 

 

 

 

 

  سایز Modal  :

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

همچنین سایز مودال به صورت پیش فرض Medium می باشد

مودال در سایز کوچک :

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

 6358371005689021492.png

مودال در سایز بزرگ :

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

 

6358371003570400313.png

 پایان قسمت پانزدهم

 ادامه آموزش در قسمت شانزدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : http://www.w3schools.com

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.