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>

bootply

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>

Answer 2

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

Answer 3

对于那些仍然有问题的人（嗨 Google 员工！），如果您使用的是淡入淡出，则必须使用 javascript 来删除淡入淡出类。

Answer 4

我有同样的问题,尝试过很多东西,但唯一对我有用的解决方案是@Tang Chanrith建议删除模态的单独部分,但稍微改进后放回滚动条.如果接受的答案对他们不起作用,我会给出答案.对不起我的英语不好.希望我帮忙.

@Tang Chanrith

试试这个功能

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();
}

改善溶剂

您只需要从生成的body和css中删除一个类

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();
}

Answer 5

试试这个功能

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}

Answer 6

删除模态类“淡入淡出”就可以了。