Question

我已经实现了简单的bootstrap模式，这里是代码：

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

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <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>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<script>
$('#myModal').on('show.bs.modal', function (e) {
  console.log(1);
});
$('#myModal').on('shown.bs.modal', function (e) {
  console.log(2);
});
$('#myModal').on('hide.bs.modal', function (e) {
  console.log(3);
});
$('#myModal').on('hidden.bs.modal', function (e) {
  console.log(4);
});
</script>

现在当我点击按钮＆＃34;打开模态＆＃34; 10-15次，它停止工作，它没有打开模态弹出窗口。

我还检查了那种情况下的变化，所以它没有在＆＃34;中添加＆＃34;模态中的类。同时我跟js跟踪相同，所以当modal doent出现时，它只显示console.log（1）;但不是其他人。

Answer 1

您可以尝试在显示模态中添加js代码。

$(function(){
  $("#btnOpenModal").click(function(){
     $("#myModal").modal('show');
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<button type="button" class="btn btn-info btn-lg"  id="btnOpenModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <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>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 2

当我将bootstrap.js添加到您的代码时工作正常。试试这可能会对你有所帮助

$('#myModal').on('show.bs.modal', function (e) {
  console.log(1);
});
$('#myModal').on('shown.bs.modal', function (e) {
  console.log(2);
});
$('#myModal').on('hide.bs.modal', function (e) {
  console.log(3);
});
$('#myModal').on('hidden.bs.modal', function (e) {
  console.log(4);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <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>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

bootstrap模态有时不显示

2 个答案: