트위터 부트스트랩에서 모달 클로징 이벤트를 처리하는 방법은?

트위터 부트스트랩에서 모달 클로징 이벤트를 처리하는 방법은?

Twitter 부트스트랩에서 모델 설명서 보기.저는 모달의 근접 이벤트를 듣고 기능을 실행할 수 있는 방법이 있는지 파악하지 못했습니다.

예를 들어, 이 모달을 예로 들어 보겠습니다.

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

상단의 X 버튼과 하단의 닫기 버튼은 모두 다음과 같은 이유로 모달을 숨기거나 닫을 수 있습니다.data-dismiss="modal"그래서 저는 제가 어떻게든 그것을 들을 수 있는지 궁금합니다.

아니면 이렇게 수동으로 할 수도 있어요, 아마...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

당신은 어떻게 생각하나요?

부트스트랩 3 및 4에 대해 업데이트됨

부트스트랩 3 및 부트스트랩 4 문서는 사용할 수 있는 두 가지 이벤트를 참조합니다.

hide.bs .dll:이 이벤트는 인스턴스 숨기기 메서드가 호출되면 즉시 실행됩니다.
hidden.bs .dll:이 이벤트는 모달이 사용자에게 숨겨져 있는 것이 끝나면 실행됩니다(CSS 전환이 완료될 때까지 기다립니다).

사용 방법에 대한 예를 제공합니다.

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

레거시 부트스트랩 2.3.2 응답

부트스트랩의 설명서에는 사용할 수 있는 두 가지 이벤트가 나와 있습니다.

숨김: 이 이벤트는 숨김 인스턴스 메서드가 호출되면 즉시 실행됩니다.
hidden: 이 이벤트는 모달이 사용자에게 보이지 않을 때 발생합니다(css 전환이 완료될 때까지 기다립니다).

사용 방법에 대한 예를 제공합니다.

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

모달 디비가 동적으로 추가된 경우 (부트스트랩 3 및 4의 경우)를 사용합니다.

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

이것은 비동적인 콘텐츠에도 적용됩니다.

두 가지 모달 이벤트 쌍이 있습니다. 하나는 "표시"와 "표시"이고, 다른 하나는 "숨김"과 "숨김"입니다.이름에서 알 수 있듯이 오른쪽 상단 모서리에 있는 십자 기호나 닫기 단추를 클릭하는 등 모달이 근접할 때 이벤트 발생을 숨깁니다.숨겨진 상태는 모달이 실제로 근접한 후에 발사됩니다.이러한 이벤트를 직접 테스트할 수 있습니다.예를 들어,

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

그리고 질문에 대해서는 모달의 '숨기기' 이벤트를 들어보셔야 할 것 같습니다.

부트스트랩 모달 이벤트:

1. hide.bs .modal => 모달을 숨기려고 할 때 발생합니다.
2. hidden.bs .cisco => 모달이 완전히 숨겨져 있을 때 발생합니다(CSS 전환이 완료된 후).

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

이것이 도움이 되길 바랍니다.

설명한 대로 닫기 단추를 클릭할 때 특별히 수행할 작업:

<a href="#" class="btn close_link" data-dismiss="modal">Close</a>

CSS 셀렉터를 사용하여 이벤트를 첨부해야 합니다.

$(document).on('click', '[data-dismiss="modal"]', function(){what you want to do})

하지만 모달이 닫힐 때 무언가를 하고 싶다면, 이미 작성된 팁을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/12319171/how-to-handle-the-modal-closing-event-in-twitter-bootstrap