버튼을 클릭하면 부트 스트랩 모달이 나타나지 않습니다.

Question

버튼을 클릭하여 테이블 열에 삭제 버튼이 있습니다. 메시지 확인을 위해 부트 스트랩 모달을 표시하지만 데이터 삭제는 modal.please 도움말을 표시하지 않으려합니다.

내 모달

<!-- modal confirm message --> 
<div class="modal fade" id="modal-confirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 
<div class="modal-dialog" role="document"> 
    <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" id="exampleModalLabel">Enter Delatils</h4> 
     </div> 
    <div class="col-lg-12" id="message-box"></div> 
    <div class="modal-body"> 
     Are you sure? 
    <div class="modal-footer"> 
    <button type="button" id="btn-yes" class="btn btn-info"><span class="glyphicon glyphicon-floppy-save"></span></button> 
    </div> 
    <!-- /modal confirm message--> 

여기 내 자바 스크립트입니다

$(document).on('click','#btn_delete',function(){ 
var id = $(this).data('id7'); 
$('#modal-confirm').modal({show:true}); 
$('document').on('click','#btn-yes', function(){ 
    $.ajax({ 
    url:'include/delete-client-class.php', 
    type:'POST', 
    data:{'id':id}, 
    dataType:'json', 
    success:function(data){ 
     alert(data); 
    } 

}); 
}); 

});

Answer 1

에는 부트 스트랩 js 파일에 대한 참조가 포함되어 있지 않거나 jquery의 버전이 부트 스트랩의 참조보다 높다는 것이 가장 좋습니다. 예제가 제대로 작동하려면

, 당신은 부트 스트랩 CSS를 참조 할 필요가 :

<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 

을 ... 몸에서 jQuery의 파일 참조 후에는 부트 스트랩의 JS 파일을 참조해야합니다

<script data-require="jquery@1.9.1" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 

코드의 일부를 사용하여 모달을 시뮬레이트하려했던이 plunker 예제를 참조하십시오.