부트 스트랩 모달 오픈에서 함수 호출

나는 JQuery UI의 대화 상자를 사용 open했고 대화 상자가 열리면 실행할 JavaScript 코드를 지정할 수 있는 옵션 이있었습니다 . 내가 가진 기능을 사용하여 대화 상자 내에서 텍스트를 선택하기 위해 해당 옵션을 사용했을 것입니다.

이제 부트 스트랩의 모달을 사용하여 그렇게하고 싶습니다. 아래는 HTMl 코드입니다.

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

그리고 모달을 여는 버튼은 다음과 같습니다.

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

버튼의 클릭 리스너를 사용하려고했지만 모달이 나타나기 전에 경고 메시지가 표시되었습니다 .

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

필요한 사항에 따라 표시된 이벤트 / 쇼 이벤트를 사용할 수 있습니다 .

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

데모 : 플 런커

부트 스트랩 3.0 업데이트

Bootstrap 3.0의 경우 여전히 표시된 이벤트를 사용할 수 있지만 다음과 같이 사용합니다.

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

"이벤트"아래 의 Bootstrap 3.0 문서를 참조하십시오 .

작동하지 않습니다. $(window)대신 사용하십시오

보여주기 위해

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

숨어

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

show대신 shown모달 열림 대신에 모달 열림 직전에 함수를로드 하는 대신 사용할 수 있습니다 .

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

부트 스트랩 모달은 이벤트를 노출합니다. shown이런 이벤트를 들어 봐

$('#my-modal').on('shown', function(){
  // code here
});

누군가 여전히 문제가있는 경우 (loaded.bs.modal)을 사용하여 나를 위해 완벽하게 작동하는 유일한 방법은 다음과 같습니다.

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

부트 스트랩 모델 표시 및 숨기기에 belw 코드를 사용할 수 있습니다.

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

모델을 숨기려면 아래 코드를 사용할 수 있습니다.

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

이 답변이 프로젝트에 유용하기를 바랍니다.