Модальное окно Bootstrap не запускается после обновления до Bootstrap 5 и jQuery 3 в ASP.NET Core
Недавно я обновил jQuery с версии 2.2.4 до версии 3.7.1 и Bootstrap с версии 2.2.2 до версии 5.0.2 в своем проекте ASP.NET Core. После обновления я столкнулся с проблемой, из-за которой модальные всплывающие окна не запускаются при нажатии кнопок, хотя идентичные настройки отлично работают на других страницах. Я подтвердил, что Bootstrap и jQuery корректно загружаются с помощью журналов консоли и других функций.
Вот пример кнопки, которая не вызывает модальное окно:
<a class = "btn btn-sm" data-bs-toggle = "modal" data-bs-target = "#userSyncConfigHelp">Help</a>
<div style = "display: none;" class = "modal biggerModal" id = "userSyncConfigHelp" tabindex = "-1" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-hidden = "true">×</button>
<h3 class = "modal-title">User Sync Config Help</h3>
</div>
<div class = "modal-body">
<p>Hello World</p>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn" data-bs-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
При нажатии кнопки «Помощь» ничего не происходит. Однако, если я использую следующую версию кнопки из документации Bootstrap:
<a class = "btn btn-primary" data-bs-toggle = "modal" href = "#exampleModalToggle" role = "button">Open first modal</a>
Он просто добавляет модальный идентификатор к URL-адресу (например, добавляя к URL-адресу #userSyncConfigSampleAzureAD). Эта проблема не возникает при других подобных настройках на других страницах, где модальные окна работают правильно, например:
<a class = "btn btn-small" data-bs-toggle = "modal" data-bs-target = "#snippetHotKeysHelp">Help</a>
<div style = "display: none;" class = "modal biggerModal" id = "snippetHotKeysHelp" tabindex = "-1" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-hidden = "true">×</button>
<h3 class = "modal-title">Snippet Hotkeys Help</h3>
</div>
<div class = "modal-body">
<p>Hello World</p>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn" data-bs-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
Подозреваю, что проблема может быть связана с тем, как JavaScript Bootstrap взаимодействует с новой версией jQuery, или, возможно, с проблемой конфигурации, характерной для определенных страниц.
Вопрос: Сталкивался ли кто-нибудь с подобными проблемами при обновлении этих библиотек и как я могу решить проблему с модальным триггером?
Обновлять:
Если я набираю bootstrap в консоли на рабочих страницах, он возвращает загрузочный файл, но если я попробую его на проблемной странице, он возвращает ReferenceError.
Дело не в этом, я не использую jQuery для вызова модального окна, я пытаюсь вызвать его как ссылка
Ответы 2
Модальное окно Bootstrap не работает с вашей стороны, поскольку это зависит от Popper.js. Судя по вашему скриншоту, вы не импортировали popper.js.
Убедитесь, что вы импортируете файл Popper.js перед Bootstrap.js.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
Альтернативно вы можете импортировать bootstrap.bundle.js, поскольку он включает Popper.js.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
После многочисленных попыток я наконец обнаружил ошибку. Это не было связано с модальным окном или кнопкой, а скорее с проблемой при попытке импортировать Monaco для редактора, что привело к следующей ошибке:
Uncaught Error: Can only have one anonymous define call per script file at e.enqueueDefineAnonymousModule (monaco.js:7:19083) at r (monaco.js:7:26536) at bootstrap.min.js?=1713860448510:6:151 at bootstrap.min.js?=1713860448510:6:256
Я нашла хорошее решение. В моем случае мне просто нужно было перенести импорт скрипта. Вот исправленный код:
@section scripts
{
<script src = "~/bundles/monaco.js"></script>
<script>
require.config({
paths: {
'vs': '/Scripts/monaco/vs'
}
});
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.info("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
</script>
}