Bootstrap 模态隐藏不起作用

Question

Bootstrap 模态隐藏不起作用。 警报来自其他地方。但是我的模态没有隐藏 添加了 bootply。我的问题是一样的。

 <button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>

<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

靴子

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在使用两种模式切换方法：通过 Javascript 和通过数据属性。因此，您的点击触发模式显示作为您的数据属性集，并且您的 Javascript 不会影响此触发器。

只需删除数据属性并使用 Javascript 方法：

 <button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>

原文由 albertedevigo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有同样的问题。删除 fade 类。

原文由 Ahmadreza Sadafi 发布，翻译遵循 CC BY-SA 4.0 许可协议