Modal de bootstrap: não é uma função

Eu tenho um modal na minha página. Quando tento chamá-lo quando o Windows carrega, ele imprime um erro no console que diz:

$(...).modal is not a function

Este é o meu HTML modal:

<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>

E este é o meu JavaScript para executá-lo quando uma janela é carregada:

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Como posso resolver este problema?

Você tem um problema na ordem dos scripts. Carregue-os nesta ordem:

<!-- 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>

Porque isso? Como o Bootstrap JS depende do jQuery :

Dependências de plug-in

Alguns plug-ins e componentes CSS dependem de outros plug-ins. Se você incluir plug-ins individualmente, certifique-se de verificar essas dependências nos documentos. Observe também que todos os plug-ins dependem do jQuery (isso significa que o jQuery deve ser incluído antes dos arquivos do plug-in ).

Este aviso também pode ser mostrado se jQuery for declarado mais de uma vez em seu código. A segunda declaração jQuery impede que bootstrap.js funcione corretamente.

<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>

O problema é devido a ter instâncias jQuery mais de uma vez. Tome cuidado se estiver usando muitos arquivos com múltiplas instâncias do jQuery. Apenas deixe 1 instância do jQuery e seu código funcionará.

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

jQuery deve ser o primeiro:

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

Causas para TypeError: $ (…) .modal não é uma função:

1. Os scripts são carregados na ordem errada.
2. Várias instâncias jQuery

Soluções:

1. Nesse caso, se um script tentar acessar um elemento que ainda não foi alcançado, você receberá um erro. O bootstrap depende do jQuery, então jQuery deve ser referenciado primeiro. Portanto, você deve ser chamado de jquery.min.js e, em seguida, bootstrap.min.js e, além disso, o erro modal de bootstrap é na verdade o resultado de você não incluir o javascript do bootstrap antes de chamar a função modal. Modal é definido em bootstrap.js e não em jQuery. Portanto, o script deve ser incluído desta maneira

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

2. No caso de haver várias instâncias de jQuery, a segunda declaração jQuery impede que bootstrap.js funcione corretamente. então, use-o jQuery.noConflict();antes de chamar o pop-up modal

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

   jQuery aliases evento como .load, .unloadou .errorobsoleto desde o jQuery 1.8.

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

   OU tente abrir o pop-up modal diretamente

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

mude a ordem do script

Como o bootstrap é um plugin jquery, ele exige que o Jquery seja executado

Alterar a instrução de importação funcionou. De

import * as $ from 'jquery';

para:

declare var $ : any;

Corre

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

no projeto para adicionar os tipos jquery em seu projeto Angular. Depois disso, inclua

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

em seu app.module.ts

Adicionar

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

em seu index.html logo antes da tag de fechamento do corpo.

E se você estiver executando o Angular 2-7, inclua " jquery " no campo de tipos do arquivo tsconfig.app.json.

Isso removerá todos os erros de 'modal' e '$' em seu projeto Angular.

Eu encontro esse erro ao integrar bootstrap modal no angular.

Esta é a minha solução para resolver este problema.

Compartilho por quem preocupação.

Primeiro passo você precisa instalar jquerye bootstrappor npmcomando.

Em segundo lugar, você precisa adicionar o declare var $ : any;componente

E o uso pode ser usado $('#myModal').modal('hide');no método onSave ()

Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Usar:

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

O problema aconteceu comigo apenas na produção, porque importei jquery com HTTP e não HTTPS (e a produção é HTTPS)

Estou um pouco atrasado para a festa, mas há uma observação importante:

Seus scripts podem estar na ordem certa, mas preste atenção a qualquer asyncs em sua tag de script (como este)

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

Isso pode estar causando o problema. Especialmente se você tiver esse asyncconjunto apenas para ambientes de produção, pode ser muito frustrante raciocinar sobre isso.

Tive dificuldade em resolver este, verifiquei a ordem de carregamento e se o jQuery foi incluído duas vezes via empacotamento, mas essa não parecia ser a causa.

Finalmente consertou fazendo a seguinte alteração:

(antes):

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

(depois de):

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

Encontre a resposta aqui: https://github.com/ColorlibHQ/AdminLTE/issues/685

Você deve incluir:

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