logo标签列表

Bootstrap模态框隐藏无效

javascriptjquerytwitter-bootstraptwitter-bootstrap-3
51

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

检查控制台是否有任何错误。如果有，请在此处发布。 - shyammakwana.me
1
你在 alert() 后面忘记加上 ; 了。 - shyammakwana.me
1
你的 JavaScript 代码只是嵌在 HTML 中的。 - Luke
1
你的 <script> 标签在哪里？ - shyammakwana.me
1
我检查了你的代码。现在你比较 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
显示剩余4条评论
29个回答
0

如果没有任何帮助（这种情况确实会发生）- 确保没有人像下面这样阻止它（我的情况）：

$modal.on('hide.bs.modal', function (e) {
  if (shouldNotBeClosed) {
    return e.preventDefault();
  }
});
0
对于那些仍然困惑的人，你需要在同一个元素实例上调用.hide()。
0

我遇到了同样的问题。我尝试了帖子中建议的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);
}
0

检查是否在主模态框div内关闭了所有嵌套的div

<div data-backdrop="static" class="modal fade" id="modal-progress" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

-----NESTED DIV ------------------

</div>
0

在打开加载模态框之前，请确保您关闭所有其他模态框。 这是我用来关闭模态框的函数：

function hideLoadingModal() {
    $('#loadingModal').on('shown.bs.modal', function () {
        $('#loadingModal').modal('hide');      
    }); 
}

现在，如果我想要打开模态框，我调用上面的函数，然后再打开一个新的。

hideLoadingModal();
$('#loadingModal').modal('show');

希望这能对你有所帮助。
祝好。
0

以上解决方案都不适用于我。 如果您有这种情况，请尝试模拟单击关闭按钮（动态添加的按钮）：

<div class="modal" tabindex="-1" role="dialog" id="modal" area-hidden="true" style="display: inline-block;">
        <div class="modal-dialog modal-dialog-centered" role="document">
            ...
        </div>
    <a href="#close-modal" rel="modal:close" class="close-modal ">Close</a></div>
</div>

$('.close-modal').click() 应该可以解决这个问题。

0

我也遇到了同样的问题，无法找到正确的解决方案。

后来我观察到当模态窗口正常关闭时会发生什么事情。

主要有三个属性，分别是：

  • modal-open类从<body>标签中删除。
  • 在< body >标记中更改CSS。
  • modal-backdrop的<div>类被删除。

因此，当您手动执行这些操作时，会实现它，如果不起作用。

Jquery中代码应该如下所示：

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

因此，请尝试这个并获得解决方案。
0

当我点击使用data-toggle="modal"属性绑定的链接时，我打开了模态弹出窗口，并尝试使用JavaScript关闭它，但每次都失败了。因此，当我从该链接中删除"data-toggle"属性和"href"并使用JavaScript打开它时，也可以使用JavaScript正确关闭它。

从下面的几行代码中，您可以轻松理解

<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">高级搜索</a>

我将上面的链接更改为以下内容

 <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

之后，当我尝试使用JavaScript关闭它时，我就成功了

$("#CustomerAdvancedModal").modal('hide');

-3

非常简单.. 移除淡入淡出类 :)

1
这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Lajos Arpad
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接