부트스트랩 모드: 함수가 아닙니다.

부트스트랩 모드: 함수가 아닙니다.

제 페이지에 모달이 있어요.창이 로드될 때 호출하려고 하면 콘솔에 다음과 같은 오류가 표시됩니다.

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

이것은 나의 Modal 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>

그리고 이것은 윈도우가 로딩될 때 그것을 실행하기 위한 나의 자바스크립트입니다.

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

왜 이런 거죠?부트스트랩 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>

TypeError의 원인: $(…).modal은 함수가 아닙니다.

1. 스크립트가 잘못된 순서로 로드됩니다.
2. 여러 jQuery 인스턴스

솔루션:

1. 경우, 스크립트가 아직 도달하지 않은 요소에 액세스하려고 하면 오류가 발생합니다.부트스트랩은 jQuery에 따라 다르므로 jQuery를 먼저 참조해야 합니다.따라서 jquery.min.js라고 부른 다음 bootstrap.min.js라고 불러야 합니다. 그리고 더 나아가 bootstrap modal 오류는 사실 modal 함수를 호출하기 전에 bootstrap의 javascript를 포함하지 않은 결과입니다.modal은 jQuery가 아닌 bootstrap.js에 정의됩니다.그래서 대본은 이런 식으로 포함되어야 합니다.

      <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();modal 팝업을 호출하기 전에

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

   j이벤트 별칭 쿼리:.load,.unload아니면.errorjQuery 1.8 이후 감가상각되었습니다.

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

   또는 modal 팝업을 직접 열어 봅니다.

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

jQuery가 첫번째여야 합니다.

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

이 문제는 jQuery 인스턴스가 두 번 이상 있기 때문입니다.jQuery의 여러 인스턴스가 있는 파일을 많이 사용하는지 주의하세요.jQuery의 인스턴스 1개만 남겨주시면 코드가 작동합니다.

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

대본의 순서를 바꾸다

부트스트랩은 jquery 플러그인이므로 Jquery를 실행해야하기 때문입니다.

용도:

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

수입명세서를 변경할 수 있었습니다. From

import * as $ from 'jquery';

대상:

declare var $ : any;

이 문제를 해결하기 위해 고군분투했고, load order와 jQuery가 번들링을 통해 두 번 포함되었는지 확인했지만, 그것이 원인은 아닌 것 같습니다.

최종적으로 다음과 같이 변경하여 수정했습니다.

(이전):

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

(이후):

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

여기서 답 찾기: https://github.com/ColorlibHQ/AdminLTE/issues/685

모달 부트스트랩을 각도로 통합할 때 이 오류가 발생합니다.

이것이 이 문제를 해결하기 위한 나의 해결책입니다.

나는 누구를 위해 관심을 갖는지를 공유합니다.

설치가 필요한 첫 번째 단계jquery그리고.bootstrap타고npm지휘.

두번째로 추가가 필요합니다.declare var $ : any;상에서

그리고 사용은 사용할 수 있습니다.$('#myModal').modal('hide');save의 on Save() 메서드

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

달려.

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

각 프로젝트에서 jquery 유형을 추가합니다.그 이후에는 다음을 포함합니다.

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

app.javior.ts에서

더하다

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

당신의 색인에. 그 시체 폐쇄 태그 바로 앞에.

그리고 Angular 2-7을 실행 중인 경우 tsconfig.app.json 파일의 types 필드에 "jquery"를 포함합니다.

이렇게 하면 Angular 프로젝트에서 'modal'과 '$'의 오류가 모두 제거됩니다.

파티에 좀 늦었지만, 중요한 메모가 있습니다.

스크립트가 올바른 순서일 수도 있지만 주의해야 합니다.async 태그의 와 와

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

이로 인해 문제가 발생할 수 있습니다.특히 이걸 가지고 계시다면.async운영 환경만을 위해 설정할 수 있습니다. 이는 정말로 생각하기 답답할 수 있습니다.

jsp에서 modal 대화상자를 추가하고 jsx에서 javascript로 열려고 했는데 "...modal is not function"이라는 같은 오류가 발생했습니다.

저의 경우 jsx에 누락된 수입품을 추가하는 것만으로 문제가 해결되었습니다.

`import "./../bower/bootstrap/js/modal.js"; // or import ".../bootstrap.min.js"` 

HTTPS가 아닌 HTTP로 jquery를 가져왔다는 이유만으로 프로덕션에서 문제가 발생했습니다(그리고 프로덕션은 HTTPS입니다).

jQuery를 추가합니다. 충돌 없음();

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

언급URL : https://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function