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

- Sam

---

检查控制台是否有任何错误。如果有，请在此处发布。 - shyammakwana.me

你在 alert() 后面忘记加上 ; 了。 - shyammakwana.me

你的 JavaScript 代码只是嵌在 HTML 中的。 - Luke

你的 <script> 标签在哪里？ - shyammakwana.me

我检查了你的代码。现在你比较 a == 5。但是 a 总是 4。你可能需要检查一下为什么要进行这个比较。 另外，如果你想从 Javascript 打开模态框，需要删除 data-target：<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>data-target 直接打开模态框。请检查是否有效。 - Kshitiz

Answer 1

我遇到了同样的问题。移除fade类。

- POPI

---

我认为这个课程会在JS的“隐藏”命令上造成时间延迟。 - POPI

哇，那真的起作用了！谢谢你，你是我的救星。 - ragnarswanson

这个答案应该被提高更多。立即删除淡入效果解决了这个问题。 - iamchrisfryer

问题出现在 'fade' 类上。但是您不需要将其删除。请按照以下步骤操作： else { $("#myModal").on('shown.bs.modal', function () { $('#myModal').modal('hide'); } } - Sam

谢谢！在 MacOS Safari 和 Chrome 上，Modal hide() 能够正常工作，但在 iOS Safari 和 Chrome 上无法正常工作。移除 fade 解决了这个问题。 - bgerd

Answer 2

你同时使用了两种模态框切换的方法：通过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

---

我现在有一个问题，可能是由于这个原因。我在本地开发环境中无法检测到它，但我们收到了一些报告称我们的模态框没有关闭并且字段被清除。你有任何关于导致这种冲突的情况的想法吗？我们确实同时使用了javascript和数据属性来指示模态框关闭，但只有在某些人的机器上才会出现问题。是特定版本的bootstrap或jquery与某个版本的Chrome等组合导致的问题吗？ - realisation

@Femtosecond，如果没有阅读您的代码或至少具有精确的复制条件，很难知道发生了什么情况，您应该提出自己的问题。 - albertedevigo

这个答案帮助我找到了问题所在，我的<div>类中使用的是class="modal"而不是class="modal-bootstrap"。我改成了class="modal-bootstrap"，问题得到了解决。 - Jimmy Genslinger

我想这可能是我的问题，但仍然不确定如何恢复在单击模态框外部时关闭模态框的功能。从blur()事件中执行似乎对我没有起作用。 - BVernon

Answer 3

对于那些仍然存在问题（你好Google搜索者！）的人，如果您正在使用淡入淡出效果，您将需要使用JavaScript来移除淡入淡出类。

- ninjaneer

---

跟我遇到了完全相同的问题。 - Amit Shah

这个答案应该被提升更多。立即删除淡出效果可以解决问题。上面还有另一个评论给出了相同的答案。 - iamchrisfryer

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();
}

- Vaios P.

---

这会防止它再次打开，直到刷新页面。 - shamaseen

是的，模态框在关闭后不会重新打开，但我发现如果在显示模态框的函数中添加： $("#LoadingModal").addClass("in"); 它就会重新出现 :) - NobleGuy

Answer 5

试试这个函数

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

- Tang Chanrith

---

使用 $(",modal-backdrop").remove() 后，我似乎创建了一个新的问题... 我的滚动条也消失了！需要找到另一个解决方案。 - Harvey Mushman

Answer 6

移除模态框的类名 "fade" 即可。

- user14794861

---

简短的回答更适合对问题进行评论。 - Ramin eghbalian

Answer 7

我已经解决了这个问题。

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

- Takechi Ponchai

Answer 8

尝试像这样添加"return false":

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

- iMichaeln

---

它对我有效，但为什么有效？我的意思是它解决了什么问题？ - Sajjad

Answer 9

我曾遇到同样的问题，我的错误在于尝试打开模态窗口多次。我们必须在尝试打开之前测试模态窗口是否已经打开。

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

- Mathieu

Answer 10

我检查了你的代码。现在你比较a == 5，但a始终为4。你可能需要检查一下为什么要进行这种比较。此外，如果你想从JavaScript打开模态框，你需要删除data-target属性：

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

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

- Kshitiz