پرسش
غیرفعال کردن بسته شدن 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