Bootstrap模态隐藏不起作用

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

Review and confirm 
 
 
 
 -- content ---- 
 
 
 
 Close Save changes 
 
  $("#buy").click(function () { var a = 4; if (a == 5) { alert("if"); $('#myModal').modal('show'); } else { alert("else"); $('#myModal').modal('hide'); } });  

bootply

Answer 1

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

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

 Review and confirm 
  
  

Answer 2

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

@Tang Chanrith

试试这个function

 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 3

试试这个function

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

Answer 4

我检查了你的代码。 现在你比较一个== 5.但是a总是4.你可能要检查这个为什么你要做这个比较。 如果你想从javascript打开模态，你还需要删除数据目标：

 Review and confirm 

data-target直接打开模态。 检查这是否有效。

Answer 5

尝试像这样添加return false：

 $("#buy").click(function () { var a = 4; if (a == 5) { alert("if"); $('#myModal').modal('show'); } else { alert("else"); $('#myModal').modal('hide'); } return false; }); 

Answer 6

我解决了这个问题。

 $('#landingpage, body').on('click',function(){ $( ".action-close" ).trigger( "click" );}); 

Answer 7

在java脚本代码中，您需要添加一行代码

 $("#savechanges").on("click", function (e) { $("#userModal").modal("hide"); e.stopPropagation(); //This line would take care of it }); 

Answer 8

你应该尝试这个$('.modal.in').modal('hide')

通过https://github.com/twbs/bootstrap/issues/489

Answer 9

我有同样的问题，我的错误是我试图打开模态窗口几次。 在尝试打开模式窗口之前，我们必须测试模态窗口是否尚未打开。

  if (!($("#MyModal").data('bs.modal') || {})._isShown){ $("#MyModal").modal('show'); } 

Answer 10

正如我遇到的，有时您需要删除显示样式：

 style="display: block;" 

Answer 11

我遇到过同样的问题。 我尝试了post中建议的JavaScript方式，不幸的是它只有一半的时间工作。 如果我几次触发我的模态，它就会出错。 结果我创建了一个使用CSS的工作：

 /* Hide the back drop*/ .modal-backdrop.show { display: none; } /* Simulate the backdrop using background color */ .modal-open .modal { background-color: rgba(47, 117, 19, 0.3); }