引导模式不会显示在单击按钮上

问题描述：

我有一个删除按钮在我的表列上点击该按钮我想显示引导模式的确认消息，但它删除数据但不显示模式。请帮助引导模式不会显示在单击按钮上

我的语气

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

}); 
});

}）;

您是否包含对引导程序js文件的引用？ – n0m4d

答

我最好的猜测是你可能没有包含对引导js文件的引用，或者说jquery的版本高于引导的版本。

为使本示例正常工作，您需要引用引导CSS：

<link data-require="[email protected]*" 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="[email protected]" data-semver="1.9.1" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script data-require="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

请参阅此plunker示例，其中我试图通过使用代码的某些部分来模拟模态。

引导模式不会显示在单击按钮上

相关推荐