Question

我的表格栏上有一个删除按钮，点击该按钮我想显示一个用于确认消息的引导模式，但它删除了数据但没有显示模态。请帮助

我的模态

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

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

要使示例正常工作，您需要引用bootstrap 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的文件引用之后，你需要引用bootstrap的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示例，其中我尝试使用部分代码来模拟模态。

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

1 个答案: