Twitter 부트 스트랩에서 모달 닫기 이벤트를 처리하는 방법은 무엇입니까? <button type=”button” class=”close

트위터 부트 스트랩에서 모달 문서를 살펴보십시오 . 모달의 close 이벤트를 듣고 함수를 실행할 수있는 방법이 있는지 알아낼 수 없었습니다.

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

<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 용으로 업데이트

Bootstrap 3 및 Bootstrap 4 문서는 사용할 수있는 두 가지 이벤트를 나타냅니다.

hide.bs.modal :이 인스턴스는 hide 인스턴스 메소드가 호출되면 즉시 시작됩니다.
hidden.bs.modal :이 이벤트는 모달이 사용자에게 숨겨지면 발생합니다 (CSS 전환이 완료 될 때까지 기다립니다).

사용 방법에 대한 예를 제공하십시오.

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

레거시 부트 스트랩 2.3.2 답변

부트 스트랩 문서 는 사용할 수있는 두 가지 이벤트를 나타냅니다.

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

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

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

답변

모달 div가 동적으로 추가되면 다음을 사용하십시오 (부트 스트랩 3의 경우)

$(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.modal => 모달이 완전히 숨겨지면 (CSS 전환이 완료된 후) 발생합니다.
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

이것이 도움이되기를 바랍니다.

답변