jquery를 통해 트리거 부트 스트랩 모달

Question

문제가 발생했습니다. jquery를 통해 부트 스트랩 모달을 트리거하려고하는데 작동하지 않습니다. 나는 모든 방법을 시도 : 방법 NO1 :

$(document).ready(function(){ 
    $('#btn').click(function(){ 
     $('#server_msg_modal').modal('show'); 
    }); 
}); 

방법 NO2 :

$(document).ready(function(){ 
    $('#btn').click(function(){ 
     $('#server_msg_modal').modal('show'); 
    }); 
}); 

방법 NO3 :

$('#server_msg_modal').modal({ 
    show: 'true' 
}); 

아무것도 저를 도와주세요 ... 작동하지 않습니다를.

Answer 1

단추에 클릭 핸들러를 추가하고 모달 창을 여는 jQuery 함수가 모두 작동해야합니다. 아래 예제를 참조하십시오. Chrome의 DevTools를 사용하여 콘솔에 JavaScript 오류가 있는지 확인하는 방법을 제안 할 수 있습니다.

$(document).ready(function(){ 
 
    $('#btn').click(function(){ 
 
    $('#server_msg_modal').modal('show'); 
 
    }); 
 
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 
<div class="btn btn-danger" href="#server_msg_modal" data-toggle="modal">using data attribute</div> 
 

 
<div class="btn btn-danger" id="btn">using jQuery click handler</div> 
 

 

 
<div class="modal fade" id="server_msg_modal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Modal body</p> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->