افزونه Modal بوت استرپ

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

مقالات

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

مثال زیر نشان می دهد که چگونه یک modal پایه در bootsrap ایجاد کنید:

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

&lt;!-- Modal -->
&lt;div id="myModal" class="modal fade" role="dialog">
  &lt;div class="modal-dialog">

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

  &lt;/div>
&lt;/div>

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

<h4 class="modal-title">Modal Header</h4>

</div>

<p>Some text in the modal.</p>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

توضیح مثال بالا:

بخش Trigger :

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

سپس دو ویژگی data-* را وارد کنید:

data-toggle = “modal” پنجره modal را باز می کند.
data-target = “# myModal” به شناسه ی modal اشاره می کند.

بخش Modal

والدین از modal باید یک شناسه داشته باشد که همان مقدار مشخصه data-target است که برای هدایت modal (myModal) استفاده می شود.
کلاس .modal محتوای را به عنوان modal مشخص می کند و روی آن فوکوس می کند.
کلاس .fade یک افکت transition را اضافه می کند که در داخل و خارج مدال را محو می کند. اگر این اثر را نمی خواهید، این کلاس را حذف کنید.

نقش attribute = “dialog” باعث افزایش دسترسی افراد با استفاده از خوانندگان صفحه نمایش می شود

کلاس .modal-dialog مجموعه عرض مناسب و حاشیه مدال را تعیین می کند.

بخش Modal Content

<div> با کلاس .modal-content استایل (modal (border، background-colorو … ) را میسازد. داخل این header, body, footer را اضافه می کند.

کلاس .module-header برای تعریف استایل برای هدر modal استفاده می شود. <button> در داخل هدر یک ویژگی data-dismiss = “modal” دارد که اگر روی آن کلیک کنید، modal بسته شود.

کلاس .close استایل دکمه بستن است، و کلاس .modal title عنوان header را با یک ارتفاع خط درست می کند.

کلاس .modulate-body برای تعریف استایل برای بدنه modal استفاده می شود. هر نشانه HTML را اینجا می توانید اضافه کنید: پاراگراف ها، تصاویر، فیلم ها و غیره

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

اندازه Modal

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

اضافه کردن کلاس اندازه به عنصر <div> با کلاس .modal-dialog:

مثال modal کوچک

&lt;div class="modal-dialog modal-sm">

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

مثال modla بزرگ

افزونه Modal بوت استرپ

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

اندازه Modal

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

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

اندازه Modal

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ