پلاگین Modal

« صفحهٔ قبل

صفحهٔ بعد »

پلاگین Modal یک کادر محاوره ای (Dialog Box) یا پینجره باز شو (Popup Window) است که در بالای صفحه فعلی نمایش داده می‌شود:

نکته: پلاگین‌ها را می‌توان جداگانه (با استفاده از فایل مجزای “modal.js”) یا همه را با هم (با استفاده از فایل “bootstrap.js” یا bootstrap.min.js”) اضافه کرد.

نحوهٔ ایجاد یک Modal

مثال زیر نحوهٔ ایجاد یک modal ساده را نشان می‌دهد:

مثال

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

برای راه‌اندازی پنجرهٔ modal، باید از یک کلید یا لینک استفاده شود.

سپس دو ویژگی data-* اضافه شود:

1. data-toggle="modal" پنجرهٔ Modal را باز می‌کند
2. data-target="#myModal" به آی‌دی Modal اشاره می‌کند

• بخش “Modal”:

<div> والد Modal باید یک آی دی داشته باشد که مشابه با مقدار ویژگی data-target باشد که برای راه اندازی "myModal") به کار می‌رود.

کلاس .modal محتوای <div> را بعنوان یک Modal شناسایی می‌کند و تمرکز را روی آن قرار می‌دهد

کلاس .fade حالت انتقالی را ایجاد می‌کند که Modal را آشکار و محو (Fade in and out) می‌کند.

اگر به این حالت نیاز ندارید می‌توانید این کلاس را حذف کنید.

ویژگی role="dialog" دسترس پذیری را برای کاربرانی که از صفحه خوان‌ها (Screen Readers) استفاده می‌کنند بهبود می‌بخشد.

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

• بخش “Modal Content”:

<div> با class="modal-content به Modal استایل می‌دهد (کادر، رنگ پس زمینه و غیره). عنوان، بدنه و پاورقی Modal داخل این <div> را اضافه می‌شود.

کلاس .modal-header برای تعیین استایل عنوان Modal به کار می‌رود.

عنصر <button> داخل عنوان یک ویژگی data-dismiss="modal" دارد که در صورت کلیک برروی Modal آن را می‌بندد. کلاس .close به کلید بستن استایل می‌دهد و کلاس .modal-title عنوان را با یک ارتفاع-خط مناسب استایل می‌دهد.

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

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

اندازه Modal

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

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

Modal کوچک

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

مشاهدهٔ نتیجه

Modal بزرگ

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

مشاهدهٔ نتیجه

بطور پیش فرض اندازهٔ Modalها متوسط است.

مرجع کامل Modal بوت استرپ

برای دستیابی به مرجع کامل همه امکانات Modal، متدها و رویدادها، به مرجع Modal JS بوت استرپ ما مراجعه کنید.

« صفحهٔ قبل

صفحهٔ بعد »