مودال (Modal)

«مودال بوت استرپ» یک پنجره پاپ آپ روی صفحه است. «کامپوننت (Component)» یعنی بخش آماده رابط. مودال برای پیام های مهم عالی است. مثل اعلام نمره در سامانه مدرسه.

ساخت مودال پایه

یک دکمه با data-bs-toggle="modal" و data-bs-target بساز. سپس ظرف .modal با .modal-dialog و .modal-content قرار بده.

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal body..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

مشاهده در ادیتور

افزودن انیمیشن (Fade)

کلاس .fade افکت محو هنگام باز و بسته شدن می دهد. بدون آن، مودال ناگهانی نمایش می یابد.

<!-- Fading modal -->
<div class="modal fade" id="fadeModal"></div>
<!-- Modal without animation -->
<div class="modal" id="plainModal"></div>

مشاهده در ادیتور

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

اندازه را روی .modal-dialog تنظیم کن. از .modal-sm، .modal-lg یا .modal-xl استفاده کن.

<div class="modal" id="sizeModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content"></div>
  </div>
</div>

مشاهده در ادیتور

مودال تمام صفحه

برای پوشش کل صفحه، .modal-fullscreen بده. برای حالت واکنش گرا از کلاس های .modal-fullscreen-*-down استفاده کن.

<div class="modal" id="fullModal">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content"></div>
  </div>
</div>

مشاهده در ادیتور

<div class="modal" id="fullMdDown">
  <div class="modal-dialog modal-fullscreen-md-down">
    <div class="modal-content"></div>
  </div>
</div>

مشاهده در ادیتور

مرکزچین و اسکرول داخلی

برای مرکزچین عمودی از .modal-dialog-centered استفاده کن. برای اسکرول داخلی از .modal-dialog-scrollable کمک بگیر.

<div class="modal" id="centeredModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content"></div>
  </div>
</div>

مشاهده در ادیتور

<div class="modal" id="scrollModal">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content"></div>
  </div>
</div>

مشاهده در ادیتور

گام های عملی سریع

1. یک دکمه با data-bs-target به مودالت وصل کن.
2. ظرف .modal و .modal-dialog و .modal-content بساز.
3. سربرگ، بدنه و فوتر را جدا قرار بده.
4. برای افکت، کلاس .fade اضافه کن.
5. نیاز داشتی، اندازه یا تمام صفحه را تنظیم کن.

نکته: دکمه بستن باید data-bs-dismiss="modal" داشته باشد. بنابراین، مودال تمیز بسته می شود.

جمع بندی سریع

• مودال بوت استرپ ساده و قابل تنظیم است.
• انیمیشن محو با .fade فعال می شود.
• اندازه ها روی .modal-dialog تنظیم می شوند.
• تمام صفحه و اسکرول داخلی هم ممکن است.
• مرکزچین با .modal-dialog-centered انجام می شود.

صفحه های مرتبط: اسلایدشو (Carousel)، تولتیپ (Tooltip).