Отключение закрытия модалки 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().

Полезные материалы

1. Модальное окно · Bootstrap v5.0
2. .off() | Документация по jQuery API
3. Event: метод stopPropagation() – Веб API | MDN
4. Twitter bootstrap modal-backdrop не исчезает – Stack Overflow
5. Шпаргалка Bootstrap 4 – Полный список классов Bootstrap
6. Как создать модальное окно с помощью CSS и JavaScript
7. Проблемы · twbs/bootstrap · GitHub