Bootstrap模式触发两次显示事件

Question

我正在创建一个模态，事件显示将触发两次。 我为此也创建了JS小提琴。 以下是打开模式的代码

<div class="container">
  <h2>Large Modal</h2>
  <button type="button" class="btn btn-info btn-lg" id="myModalBtn">Open Large Modal</button>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>This is a large modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$("#myModal").on('show.bs.modal', function() {
        console.log("open");
    });
    $("#myModal").on('hide.bs.modal', function() {
        console.log("close");
    });
  $("#myModalBtn").on("click",function(){
      $("#myModal").modal({backdrop: 'static', keyboard: false});
$("#myModal").modal('show');
  });
</script>

Answer 1

也许是由于您没有将data-toggle="modal"和data-target="#myModal"属性data-target="#myModal"到按钮上的原因，但是我不确定。 因此，假设您只需要带有模式开口的常规模式按钮，则可以将这两个属性添加到按钮：

<button type="button" class="btn btn-info btn-lg" id="myModalBtn" 
    data-toggle="modal" and data-target="#myModal">Open Large Modal</button>

并删除此部分：

$("#myModalBtn").on("click",function(){
    $("#myModal").modal({backdrop: 'static', keyboard: false});
    $("#myModal").modal('show');
});

您可以签出引导程序模式用法 ，以确保您的代码符合引导程序标准。