Отключение закрытия модалки Bootstrap кликом вне области
Быстрый ответ
Чтобы предотвратить закрытие модального окна Bootstrap при клике вне его области, необходимо установить опцию backdrop
в значение 'static'
:
// Теперь, чтобы закрыть это модальное окно, потребуется немало усилий!
$('#myModal').modal({ backdrop: 'static' });
А чтобы модальное окно не закрывалось по нажатию на клавишу Escape, следует задать опцию keyboard
равную false
:
// Закрыть этим окно теперь нельзя даже с помощью клавиши Escape.
$('#myModal').modal({ backdrop: 'static', keyboard: false });
Теперь, чтобы закрыть модальное окно, потребуется осознанное действие от пользователя. Например, вызвать соответствующую команду в JavaScript или кликнуть по специальной кнопке внутри модального окна.
Визуализация
Помимо настроек, важно верно визуализировать это в голове. Ваше модальное окно должно быть похоже на твердую крепость 🏰, вокруг которой установлено минное поле 💣. Без осознанного действия окно не закроется, независимо от количества кликов вне его области или нажатия на клавишу Escape.
// Настройка защиты: клик снаружи не закрывает окно, и клавиша Escape также.
$('#myModal').modal({ backdrop: 'static', keyboard: false });
💣🏰: Клики снаружи = 🚫 | Нажатие Escape = 🚫
Работа с несколькими модальными окнами
Использование HTML-атрибутов
Вы также можете настроить поведение модального окна используя HTML. Добавьте необходимые опции прямо в элемент, который открывает модальное окно:
<!-- Кнопка открытия модального окна с дополнительными параметрами -->
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal" data-bs-backdrop="static" data-bs-keyboard="false">
Открыть твердую крепость
</button>
Управление несколькими модальными окнами
В случае, если на странице несколько модальных окон, можно настроить поведение каждого из них индивидуально:
// Первое модальное окно объявляет, что останется здесь навеки, а второе закроется по первой же команде.
$('#firstModal').modal({ backdrop: 'static', keyboard: false }); // "Я останусь здесь навеки."
$('#secondModal').modal({ backdrop: true, keyboard: true }); // "Как пожелаете, мастер."
Условное переопределение стандартного поведения
В некоторых случаях полезно менять поведение модального окна в зависимости от определённых условий. Пользуйтесь событием hide.bs.modal
для контроля закрытия модального окна:
$('#myModal').on('hide.bs.modal', function (e) {
if (!yourCustomCondition()) {
e.preventDefault(); // "Ты не пройдёшь!" – гласит определение модального окна на подобие Гэндальфа.
}
});
Проблемы и решения
- Модальное окно не закрывается: Проверьте правильность значений опций
backdrop
иkeyboard
. Опечатка может вызвать непредсказуемое поведение. - Конфликт модальных окон: Убедитесь, что вы настраиваете правильное модальное окно. Никто не хочет послать сообщение не тому адресату, верно?
- Совместимость с другими скриптами: Помните про возможные конфликты скриптов Bootstrap и сторонних библиотек, таких как Calibri и Comic Sans. Прежде чем применять
.on()
, убрать предыдущие обработчики событий, используя.off()
.
Полезные материалы
- Модальное окно · Bootstrap v5.0
- .off() | Документация по jQuery API
- Event: метод stopPropagation() – Веб API | MDN
- Twitter bootstrap modal-backdrop не исчезает – Stack Overflow
- Шпаргалка Bootstrap 4 – Полный список классов Bootstrap
- Как создать модальное окно с помощью CSS и JavaScript
- Проблемы · twbs/bootstrap · GitHub