Bootstrap modal: не является функцией

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

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

Ответы

Ответ 1

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

<!-- 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 должен быть включен перед файлами плагинов).

Ответ 2

Это предупреждение также может быть показано, если 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>

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

измените порядок script

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

Ответ 6

Изменена операция импорта. От

import * as $ from 'jquery';

чтобы:

declare var $ : any;

Ответ 7

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

Ответ 8

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

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

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

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

Ответ 9

Бежать

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

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

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.

Это удалит все ошибки 'modal' и '$' в вашем Angular проекте.

Ответ 10

Я встречаю эту ошибку, когда интегрирую модальный бутстрап в угловой.

Это мое решение, чтобы решить эту проблему.

Я делюсь тем, о ком беспокоюсь.

Для начала вам нужно установить jquery и jquery bootstrap помощью команды npm.

Во-вторых, вам нужно добавить declare var $: any; в компоненте

И использование может использовать $('#myModal').modal('hide'); по методу onSave()

Демонстрация https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Ответ 11

В моем случае... мне не хватало bootstrap.js :)

Ответ 12

bootstrap.min.css
jquery.min.js
bootstrap.min.js
должны включать. Я использовал модель начальной загрузки