Twitter Bootstrap Modal에 함수 바인딩 닫기

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

---

Bootstrap 3을 시작 하면 ( Edit : Bootstrap 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

---

"live"대신 "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 전환이 완료 될 때까지 기다립니다).

---

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… })

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

---

나는 여기서 늦게 뛰어 들었지만 부트 스트랩 모달을 React와 함께 사용하는 사람들을 위해 MutationObserver 를 사용하여 모달의 가시성 변화를 감지하고 그에 따라 상태를 조정했습니다.이 방법은 모달이 닫힐 때 모든 기능을 실행하는 데 적용될 수 있습니다 :

//react stuff
componentDidMount: function() {
    var self = this;
    $(function() {
        $("#example_modal").addClass('modal');
        //use MutationObserver to detect visibility change
        //reset state if closed
        if (MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            //use jQuery to detect if element is visible
            if (!$('#example_modal').is(':visible')) {
                //reset your state
                self.setState({
                    thingone: '',
                    thingtwo: ''
                });
            }
        });
        var target = document.querySelector('#example_modal');
            observer.observe(target, {
                attributes: true
          });
        }
    });
}

최신 브라우저 지원에 대해 궁금한 사용자를 위해 CanIUse는 MutationObserver의 범위가 약 87 %입니다.

누군가를 돕는 희망 :)

건배,

제이크

---

나는 이렇게 할 것입니다 :

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

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

참고 URL : https://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close