Twitter Bootstrap Modal에 함수 바인딩 닫기

새 프로젝트에서 Twitter Bootstrap lib를 사용하고 있으며 페이지의 일부를 모달 닫기에서 최신 json 데이터를 새로 고치고 검색하려고합니다. 나는 누군가가 그것을 지적하거나 해결책을 제안 할 수있는 문서의 어느 곳에서도 이것을 보지 못한다.

문서화 된 방법을 사용할 때의 두 가지 문제

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

모달에 "숨기기"클래스를 이미 첨부하여 페이지로드시 표시되지 않으므로 두 번로드됩니다.

숨기기 클래스를 제거하고 요소 ID를 설정하고 닫기를 칠 때 위의 함수에 display:none추가 console.log("THE MODAL CLOSED");해도 아무 일도 일어나지 않습니다.

부트 스트랩 3 & 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

부트 스트랩 3 : getbootstrap.com/javascript/#modals-events

부트 스트랩 4 : getbootstrap.com/docs/4.1/components/modal/#events

부트 스트랩 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

getbootstrap.com/2.3.2/javascript.html#modals → 이벤트를 참조하십시오

부트 스트랩 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

실제 예제는이 JSFiddle을 참조하십시오.

https://jsfiddle.net/6n7bg2c9/

여기 문서의 모달 이벤트 섹션을 참조하십시오.

https://getbootstrap.com/docs/4.3/components/modal/#events

부트 스트랩 3을 시작 하면 ( 편집 : 부트 스트랩 4 에서도 동일 ) 이벤트를 발생시킬 수있는 두 가지 인스턴스가 있습니다.

1. 모달 "숨기기"이벤트가 시작될 때

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. 모달 "숨기기"이벤트가 완료되면

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

참조 : http://getbootstrap.com/javascript/#js-events

"실시간"대신 "on"이벤트를 사용해야하지만 문서 개체에 할당해야합니다.

사용하다:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

부트 스트랩 은 모달이 사용자로부터 숨겨 졌을 때 이벤트 를 시작하려는 경우와 같이 모달에 연결할 수있는 이벤트를 제공합니다. hidden.bs.modal 이벤트는 다음과 같이사용할 수 있습니다

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

작동 확인 바이올린 여기 에 여기에 모달 방법 및 이벤트에 대한 자세한 읽어 문서

부트 스트랩 4 :

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs.modal :이 이벤트는 hide 인스턴스 메소드가 호출되면 즉시 시작됩니다.

hidden.bs.modal :이 이벤트는 모달이 사용자에게 숨겨지면 발생합니다 (CSS 전환이 완료 될 때까지 기다립니다).

나는 이렇게 할 것입니다 :

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

나머지는 이미 다른 사람들에 의해 작성되었습니다. 또한 jquery-on method 문서를 읽는 것이 좋습니다.

hide.bs.modal모달이 닫힐 때 트리거되는 부트 스트랩 이벤트와 관련하여 많은 답변을 보았습니다 .

해당 이벤트에 문제가 있습니다. 모달의 팝업 (팝 오버, 툴팁 등)이 해당 이벤트를 트리거합니다.

모달이 닫힐 때 이벤트를 잡는 다른 방법이 있습니다.

$(document).on('hidden','#modal:not(.in)', function(){} );

부트 스트랩은 in모달이 열려있을 때 클래스를 사용합니다 . 이벤트 가 트리거 될 때 hidden클래스 in가 계속 정의 되므로 이벤트 를 사용하는 것이 매우 중요합니다 hide.

IE8은 Jquery :not()선택기를 지원하지 않으므로이 솔루션은 IE8에서 작동하지 않습니다 .

나는 일부와 같은 문제가 있었다

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

이를 페이지 하단에 배치해야하며 상단에 배치하면 이벤트가 발생하지 않습니다.

모든 모달 닫기에서 함수를 시작하려면이 방법을 사용할 수 있습니다.

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

따라서 매번 모달 ID를 지정할 필요가 없습니다.