مدال‌های Bootstrap 5

مدال

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

چگونه مودال ایجاد کنیم

در اینجا نحوه ایجاد مودال پایه را نشان می‌دهیم:

مثال

<!-- دکمه باز کردن مودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  مودال باز کن
</button>
<!-- مودال -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- عنوان مودال -->
      <div class="modal-header">
        <h4 class="modal-title">عنوان مودال</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- متن اصلی مودال -->
      <div class="modal-body">
        متن اصلی مودال ..
      </div>
      <!-- پائین صفحه مودال -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">بستن</button>
      </div>
    </div>
  </div>
</div>

آزمایش کنید

برای اضافه کردن انیمیشن

لطفاً .fade کلاس برای اضافه کردن اثر ورود و خروج تدریجی در باز و بستن مودال:

مثال

<!-- مودال محو -->
<div class="modal fade"></div>
<!-- مودال بدون انیمیشن -->
<div class="modal"></div>

آزمایش کنید

اندازه‌ی مودال

با اضافه کردن به مودال کوچک .modal-sm کلاس (max-width 300px) برای اضافه کردن مودال بزرگ .modal-lg کلاس (max-width 800px) یا برای اضافه کردن مودال فوق‌العاده بزرگ .modal-xl برای تغییر اندازه‌ی مودال (max-width 1140 پیکسل) استفاده کنید. اندازه‌ی پیش‌فرض 500 پیکسل است.

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

Modal کوچک

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

آزمایش کنید

Modal بزرگ

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

آزمایش کنید

پنجره بزرگ‌تر

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

آزمایش کنید

به طور پیش‌فرض، اندازه پنجره modal "medium" (500px حداکثر عرض) است.

پنجره کامل صفحه نمایش

اگر می‌خواهید پنجره modal به کل عرض و ارتفاع صفحه بپردازد، از .modal-fullscreen کلاس:

مثال

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

آزمایش کنید

پنجره‌های کامل صفحه نمایش پویا

شما همچنین می‌توانید از .modal-fullscreen-*-* کلاس‌هایی که کنترل می‌کنند که پنجره modal کی باید به صورت کامل صفحه نمایش داده شود:

کلاس توضیح مثال
.modal-fullscreen-sm-down 576px کمتر از تمام صفحه آزمایش کنید
.modal-fullscreen-md-down 768px کمتر از تمام صفحه آزمایش کنید
.modal-fullscreen-lg-down 992px کمتر از تمام صفحه آزمایش کنید
.modal-fullscreen-xl-down 1200px کمتر از تمام صفحه آزمایش کنید
.modal-fullscreen-xxl-down 1400px کمتر از تمام صفحه آزمایش کنید

پنجره‌های مرکزی

با استفاده از .modal-dialog-centric کلاس، پنجره modal را در صفحه به صورت عمودی و افقی居中以 قرار می‌دهد:

مثال

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

آزمایش کنید

پنجره سار

وقتی که در پنجره modal محتوای زیادی باشد، یک نوار سار به صفحه اضافه می‌شود. لطفاً به مثال زیر توجه کنید تا بفهمید:

مثال

<div class="modal-dialog">

آزمایش کنید

اما، با استفاده از .modal-dialog-scrollable افزودن به .modal-dialog می‌توان فقط در پنجره modal سارکرد، نه صفحه خود:

مثال

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

آزمایش کنید