У меня на странице есть модальное окно. Когда я пытаюсь вызвать его при загрузке Windows, он выводит на консоль сообщение об ошибке:
$(...).modal is not a function
Это мой модальный HTML:
<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Submit changes
</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
И это мой JavaScript, с помощью которого можно запускать его при загрузке окна:
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
Как я могу исправить эту проблему?
javascript
jquery
html
bootstrap-modal
подлый
источник
источник
Ответы:
У вас проблема с порядком скриптов. Загрузите их в таком порядке:
Почему это? Поскольку Bootstrap JS зависит от jQuery :
источник
$
это функция jQuery. Скорее всего, этоquerySelector
функция (названная$
), которую предоставляют инструменты разработчика Google Chrome.Это предупреждение также может отображаться, если jQuery объявлен в вашем коде более одного раза. Второе объявление jQuery препятствует правильной работе bootstrap.js.
источник
Проблема возникает из-за наличия экземпляров jQuery более одного раза. Будьте осторожны, если вы используете много файлов с несколькими экземплярами jQuery. Просто оставьте 1 экземпляр jQuery, и ваш код будет работать.
источник
jQuery должен быть первым:
источник
Причины ошибки TypeError: $ (…) .modal не является функцией:
Решения:
В случае, если сценарий попытается получить доступ к элементу, который еще не был достигнут, вы получите сообщение об ошибке. Bootstrap зависит от jQuery, поэтому сначала необходимо указать jQuery. Итак, вы должны называться jquery.min.js, а затем bootstrap.min.js, и далее модальная ошибка начальной загрузки на самом деле является результатом того, что вы не включили javascript начальной загрузки перед вызовом модальной функции. Модальный режим определяется в bootstrap.js, а не в jQuery. Итак, сценарий должен быть включен таким образом
Если существует несколько экземпляров jQuery, второе объявление jQuery препятствует правильной работе bootstrap.js. так что используйте
jQuery.noConflict();
перед вызовом модального всплывающего окнапсевдонимами событий JQuery нравится
.load
,.unload
или не.error
рекомендуется , так как JQuery 1.8.ИЛИ попробуйте открыть модальное всплывающее окно напрямую
источник
изменить порядок скрипта
Поскольку bootstrap - это плагин jquery, для его выполнения требуется Jquery.
источник
Сработало изменение оператора импорта. Из
кому:
источник
Бегать
в проекте, чтобы добавить типы jquery в ваш проект Angular. После этого включить
в вашем app.module.ts
Добавить
в вашем index.html непосредственно перед закрывающим тегом тела.
А если вы используете Angular 2-7, включите « jquery » в поле типов файла tsconfig.app.json.
Это удалит все ошибки 'модального' и '$' в вашем проекте Angular.
источник
Я встречаю эту ошибку при интеграции модального бутстрапа в angular.
Это мое решение этой проблемы.
Делюсь за кого беспокойство.
Первым шагом вам необходимо установить
jquery
иbootstrap
поnpm
команде.Во-вторых, вам нужно добавить
declare var $ : any;
компонентИ использование может использовать
$('#myModal').modal('hide');
метод onSave ()Демо https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
источник
Использование:
источник
Проблема возникла со мной только в процессе производства только потому, что я импортировал jquery с HTTP, а не HTTPS (а производство - HTTPS)
источник
Я немного опоздал на вечеринку, но есть важное замечание:
Ваши сценарии могут быть в правильном порядке, но следите за любыми
async
буквами s в теге сценария (например, здесь)<script type="text/javascript" src="js/bootstrap.js" async></script>
Это могло быть причиной проблемы. Особенно, если у вас есть этот
async
набор только для производственной среды, рассуждать об этом может действительно неприятно.источник
Пытался решить эту проблему, проверил порядок загрузки и был ли jQuery включен дважды через бандлинг, но это, похоже, не было причиной.
Наконец исправил это, сделав следующее изменение:
(перед):
(после):
Нашел ответ здесь: https://github.com/ColorlibHQ/AdminLTE/issues/685
источник
bootstrap.min.css
jquery.min.js
bootstrap.min.js
источник