پرسش

غیرفعال کردن بسته شدن modal بوت استرپ با کلیک در محدوده ای غیر از خود مودال

Disable click outside of Bootstrap modal area to close modal

چطور میتونم با استفاده از بوت استرپ امکان بستن مودال با کلیک در خارج از ناحیه مودال رو غیرفعال کنم؟
به طور پیش‌فرض، مودال بوت استرپ با کلیک کردن در خارج از اون بسته میشه و من مبخوام این ویژگی رو غیرفعال کنم

1403/05/30
پاسخ

سلام برای اینکه  بسته شدن مدال بوت استرپ با کلیک در خارج از اونو غیرفعال کنی، می‌تونی از backdrop و keyboard موقع ایجاد مودال استفاده کنی
کداش به این صورت هست

در html

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
 اجرای مودال
</button> 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">عنوان مودال</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

و در جاوا اسکریپت

// Initialize modal with options to disable clicking outside and keyboard interaction
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {
  backdrop: "static", // Disables closing modal when clicking outside of it
  keyboard: false, // Disables closing modal with keyboard
});

`backdrop: 'static این گزینه باعث میشه که کلیک کردن در خارج از ناحیه مودال باعث بسته شدن اون نشه

keyboard: false این گزینه اجازه نمیده که با فشار دادن کلید ESC مودال بسته بشه.

پاسخ: 1403/05/30
آخرین آپدیت: 1403/07/15