Скрытие модального окна Bootstrap через javascript: решение

Быстрый ответ

Чтобы скрыть модальное окно Bootstrap с применением JavaScript, вам необходимо использовать метод modal('hide') для соответствующего селектора:

$('#myModal').modal('hide'); // Как бы говорим: "Пора домой, праздник окончен".

Прежде всего, убедитесь, что jQuery подключен, так как он нужен для работы с модальными окнами Bootstrap. Обратите внимание, не должно быть элементов с повторяющимися ID, иначе они могут вызвать конфликты.

Решение проблем с модальными окнами

Поиск дублирующихся ID

Будьте внимательны, вполне возможно, что среди элементов могут встретиться дублированные ID! Используйте инструменты разработчика, наподобие DevTools в Chrome или Инспектора в Firefox, для того чтобы найти и устранить возможные дубли.

// Это как тихий вопрос браузеру: "Не появился ли у нас ещё один 'myModal'?"
$('#myModal');

Подробнее об этом расскажет наш спикер на видео

Проверка JavaScript на сервере

Вполне вероятно, что сервер может игнорировать ваш JavaScript. Проверьте, не возникают ли ошибки на стороне клиента, просматривая вывод консоли браузера. Красные ошибки — это ваш сигнал к действию.

Закрытие модального окна кликом по кнопке

Позвольте браузеру "нажать" на кнопку закрытия в модальном окне — в точности так, как это делает пользователь. Иногда это является оптимальным решением при проблемах с динамическим контентом.

$('#closeButtonId').click(); // Достаточно на сегодня, пора закрывать занавес.

Учет структуры модального окна

Стоит ли функция скрытия из-за содержимого и структуры модального окна? Попробуйте изменить привязки и обработчики событий после модификации содержимого.

Визуализация

Модальное окно — это своего рода сцена для вашего представления на странице:

$('#myModal').modal('hide'); // Ваши ассистенты опускают занавес после окончания сцены.

Итак, визуализируем:

До: Занавес поднят: [🎭🎉 – Аплодисменты зрительницы]
После: Занавес опущен: [🎭🍿 – Зрители в ожидании следующей сцены]

Просто занавес опускается, и публика в предчувствии следующего действия! 🎦

Продвинутые техники управления модальным окном

Обработка событий модального окна Bootstrap

Управление поведением модального окна возможно путем отслеживания событий Bootstrap. Например, после скрытия окна срабатывает hidden.bs.modal:

$('#myModal').on('hidden.bs.modal', function (e) {
  // Пора привести сцену в порядок и готовиться к следующему акту.
});

Проверка отправки формы перед закрытием

Если в модальном окне присутствует форма, убедитесь, что она отправлена перед закрытием окна. В противном случае, вы можете испортить весь спектакль:

$('#myForm').submit(function(event) {
  event.preventDefault(); // Стоп, ещё не закончили.
  // Здесь можно отправить форму с помощью AJAX или провести валидацию
  $('#myModal').modal('hide'); // И сцена завершена!
});

Альтернативы для мгновенного скрытия

Для скрытия модального окна без использования jQuery, измените свойство display у самого окна:

let myModal = document.getElementById('myModal');
myModal.style.display = 'none'; // До скорых встреч, модальное окно!

...И оно исчезает, точно так же, как исчезает моё желание начать заниматься фитнесом.

Комплексные решения и продвинутая отладка

Учет динамики модального окна

Не забывайте о том, что динамически обновляемый контент может влиять на видимость модального окна. Сценарии следует запускать после таких изменений.

Работа с таймингом выполнения скрипта

Тайминг важен: позиционируйте скрипты после объявления модального окна в HTML.

// Ваш скрипт должен подключаться после модального окна, иначе это как прийти на вечеринку слишком рано.

Учет разных версий Bootstrap

Принимайте во внимание особенности вашей версии Bootstrap, особенно если вы работаете с версиями 3.4 или последующими. Всегда проверяйте актуальную документацию.

Развязка проблем JavaScript

JavaScript может быть полным ошибок и конфликтов – решайте возникшие вопросы и проверяйте вашу реализацию скрипта, например, create.js.erb относительно адекватной работы метода 'hide'.

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

1. Modal · Bootstrap — официальная документация по модальным окнам Bootstrap версии 4.
2. Document: querySelector() method – Web APIs | MDN — как верно выбирать элементы DOM с использованием JavaScript.
3. Element: classList property – Web APIs | MDN — управление CSS-классами элементов при помощи classList.
4. Modal · Bootstrap v5.0 — руководство по модальным окнам Bootstrap версии 5.
5. Disable click outside of bootstrap modal area to close modal – Stack Overflow — обсуждение управления поведением модальных окон.
6. How To Make a Modal Box With CSS and JavaScript — руководство по созданию и скрытию модальных окон при помощи JS.
7. Codeply v2 — работоспособный пример показа и скрытия модального окна Bootstrap.