ボタンをクリックするとブートストラップ・モーダルが表示されない

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--> 

、ここでは私のJavascriptで

$(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の例を参照してください。