Исправляем ошибку "$(…).modal is not a function" в Bootstrap

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

Убедитесь в корректности загрузки jQuery и JS Bootstrap, а также правильности их расположения в коде: jQuery должен быть подключен первым, затем — Bootstrap. Избегайте дублирования и конфликтов при подключении библиотек. Правильно подключение этих библиотек будет выглядеть так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Активировать модальное окно можно при помощи следующей команды:

$('#myModal').modal('show');

Не забудьте подставить идентификатор вашего модального окна вместо '#myModal'.

Если у вас используется несколько версий jQuery, примените функцию jQuery.noConflict(), чтобы избежать конфликтов между ними. Откажитесь от использования устаревших алиасов обработчиков событий jQuery типа .load(), .unload(), .error(), заменив их на современный метод .on():

$(window).on('load', function(){
    // Совсем скоро начнётся представление, стоит открыть модальное окно!
    $('#myModal').modal('show'); 
});

Учтите тайминг

Не торопитесь

Перед вызовом модального окна убедитесь, что DOM полностью загружен. Для этого можно использовать $(document).ready():

$(document).ready(function() {
    // Всё готово, чтобы начать.
    $('#myModal').modal('show'); 
});

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

Терпимость к тяжёлому контенту

Если модальное окно включает в себя большой объём данных, дождитесь полной загрузки всего окна:

$(window).on('load', function() {
    // Весь тяжёлый контент уже загружен, можно открывать модальное окно.
    $('#myModal').modal('show');
});

Ожидание гарантирует то, что весь контент будет полностью загружен и отрисован перед тем, как пользователь увидит модальное окно.

Исследуем проблему: устранение неполадок

Начнем с консоли

Откройте консоль разработчика (F12 или Ctrl+Shift+I) — это поможет вам найти ошибки JavaScript, которые могут быть причиной проблемы.

Возможные проблемы: взаимодействие со сторонними скриптами

Взаимодействие с другими скриптами и плагинами может препятствовать работе функции .modal(). Протестируйте свой код, минимизировав число взаимодействующих скриптов, чтобы выявить возможные проблемные места.

В поисках причины: слежение за зависимостями

Проверьте наличие всех необходимых зависимостей модального окна Bootstrap и их корректное подключение, ориентируясь на официальную документацию Bootstrap для используемой вами версии.

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

Проблема 😓 : Bootstrap не был инициализирован или включена несовместимая версия jQuery.
Функциональность 🎯 : Ожидаемое поведение модального окна в Bootstrap.

Если Bootstrap не был инициализирован или используется версия jQuery, несовместимая с Bootstrap, то вызов метода .modal() не приведёт к желаемому результату.

Решение 😎 : Инициализирована версия Bootstrap, совместимая с jQuery.
Плавная работа 🏎️ : .modal('show') // Модальное окно открывается без каких-либо проблем!

Корректное взаимодействие Bootstrap и jQuery обеспечит надежное функционирование модального окна.

Продвинутые советы для совершенствования уровня

Маленькие, но мощные атрибуты

Укажите тип содержимого в своих тегах <script> с помощью атрибута type="text/javascript":

<script type="text/javascript" src="путь_к_jquery.js"></script>

Безопасность превыше всего: запасные пути

Стабильность работы CDN может быть не идеальной, поэтому рекомендуется иметь локальную копию jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>if (!window.jQuery) { 
    // Всегда должен быть резервный план.
    document.write('<script src="локальный_путь_к_jquery.js"><\/script>'); 
}</script>

Модальные окна на мобильных устройствах: дополнительное внимание

При разработке учитывайте особенности работы мобильных браузеров и устройств с модальными окнами Bootstrap. Используйте соответствующие настройки вьюпорта и обрабатывайте touch-события.

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

1. HTML Living Standard – Источник для разбора тегов.
2. Инсайты в модель памяти Java – Познавательная статья для ознакомления.
3. PEP 202 – Понимание генераторов списков в Python – Погрузитесь в философию Python.