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


179

나는 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!");
});

3
shown.bs.modalHTML 문서에 최소한 <div class="modal fade"><div class="modal-dialog"></div></div>구조 가 포함 된 경우 이벤트가 발생합니다 .
화학 프로그래머


댓글 @ 화학 프로그래머, 그것은 답변과 함께 나타납니다
Tarek

답변:


331

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

$( "#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 문서를 참조하십시오 .


17
$("#code").on("shown.bs.modal", function(e) {})부트 스트랩 3.0에 사용하십시오 .
teewuane

화학 프로그래머가 호출 할이 코드를 적어도 <DIV 클래스 = "모달 페이드"> <DIV 클래스 = "모달-대화"> </ DIV> </ DIV> 구조를 필요에 대해 말한 것을 고려하십시오
whyoz

1
이는 #codejQuery의 기본 요소 중 하나 인 jQuery 선택기를 나타냅니다. w3schools.com/jquery/jquery_selectors.asp
DdW

내가 사용하는 $(document).on("shown.bs.modal", ...전체 청취
vladkras

1
적어도 shown.bs.modal은 실제로 모달이 표시되기 전에 실행됩니다. 이것은 내 경우에는 문제가 아니지만 알아두면 좋을 것입니다.
Jonny

86

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

보여주기 위해

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

숨어

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

5
$ ( "#modal") .on ( 'shown', function () {alert ( "모달이 열린 후에 나타나기를 원합니다!");} 나를 위해 작동하지 않았지만 $ (window) 작동했습니다 !! @viper_tkd
Krutal Modi

1
내가 바인딩 필요에 어떤 열 모달 것을 /, 그리고 특정 선택에 의해 폐쇄. 이 경우이 답변은 저에게 효과적이었습니다.
jyoseph

이것은 모달이 GUI에 완전히로드되기 전에 작동합니다. 모달이로드 된 후 모달에서 데이터를 가져 오려고합니다.이 방법은 모달 GUI가 아직 없기 때문에 모든 것에 대해 '정의되지 않음'을 반환하므로 필드와 다른 모든 것은 아직 쿼리 할 수 ​​없습니다. (표시되지 않음)
FrenkyB

이것은 나를 위해 일했지만 if( $('#code').is( e.relatedTarget ) ) { ... }페이지에 여러 개가 있기 때문에 하나의 특정 모달을 대상으로 처리기 내에 검사를 추가했습니다 .
allicarn

올바른 이벤트 이름에 감사하지만 $ (window)의 요소 ID를 바꿀 필요는 없습니다. jquery와 함께 bs4 사용하기 3.4.
Jcc. 사나 브리아

17

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

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

9

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

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

0

누군가 여전히 문제가있는 경우 (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
        });
});

-4

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

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

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

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

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


7
모방은 다시 ... 사용자의 다른 답변을 참조
로랑 B
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.