Модальный режим начальной загрузки: не является функцией

У меня на странице есть модальное окно. Когда я пытаюсь вызвать его при загрузке 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">
                &times;
            </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>

Как я могу исправить эту проблему?

У вас проблема с порядком скриптов. Загрузите их в таком порядке:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Почему это? Поскольку Bootstrap JS зависит от jQuery :

Зависимости плагинов

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагинов ).

Это предупреждение также может отображаться, если jQuery объявлен в вашем коде более одного раза. Второе объявление jQuery препятствует правильной работе bootstrap.js.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Проблема возникает из-за наличия экземпляров jQuery более одного раза. Будьте осторожны, если вы используете много файлов с несколькими экземплярами jQuery. Просто оставьте 1 экземпляр jQuery, и ваш код будет работать.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery должен быть первым:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

Причины ошибки TypeError: $ (…) .modal не является функцией:

1. Скрипты загружаются в неправильном порядке.
2. Несколько экземпляров jQuery

Решения:

1. В случае, если сценарий попытается получить доступ к элементу, который еще не был достигнут, вы получите сообщение об ошибке. Bootstrap зависит от jQuery, поэтому сначала необходимо указать jQuery. Итак, вы должны называться jquery.min.js, а затем bootstrap.min.js, и далее модальная ошибка начальной загрузки на самом деле является результатом того, что вы не включили javascript начальной загрузки перед вызовом модальной функции. Модальный режим определяется в bootstrap.js, а не в jQuery. Итак, сценарий должен быть включен таким образом

      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script>
   

2. Если существует несколько экземпляров jQuery, второе объявление jQuery препятствует правильной работе bootstrap.js. так что используйте jQuery.noConflict();перед вызовом модального всплывающего окна

   jQuery.noConflict();
   $('#prizePopup').modal('show');
   

   псевдонимами событий JQuery нравится .load, .unloadили не .errorрекомендуется , так как JQuery 1.8.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });
   

   ИЛИ попробуйте открыть модальное всплывающее окно напрямую

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });
   

изменить порядок скрипта

Поскольку bootstrap - это плагин jquery, для его выполнения требуется Jquery.

Сработало изменение оператора импорта. Из

import * as $ from 'jquery';

кому:

declare var $ : any;

Бегать

npm i @types/jquery
npm install -D @types/bootstrap

в проекте, чтобы добавить типы jquery в ваш проект Angular. После этого включить

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

в вашем app.module.ts

Добавить

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

в вашем 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.noConflict();
$('#prizePopup').modal('toggle');

Проблема возникла со мной только в процессе производства только потому, что я импортировал jquery с HTTP, а не HTTPS (а производство - HTTPS)

Я немного опоздал на вечеринку, но есть важное замечание:

Ваши сценарии могут быть в правильном порядке, но следите за любыми asyncбуквами s в теге сценария (например, здесь)

<script type="text/javascript" src="js/bootstrap.js" async></script>

Это могло быть причиной проблемы. Особенно, если у вас есть этот asyncнабор только для производственной среды, рассуждать об этом может действительно неприятно.

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

Наконец исправил это, сделав следующее изменение:

(перед):

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

(после):

window.$('#myModal').modal('hide');

Нашел ответ здесь: https://github.com/ColorlibHQ/AdminLTE/issues/685

Вы должны включить:

bootstrap.min.css
jquery.min.js
bootstrap.min.js