Bootstrap 模态重叠菜单答案

【问题标题】：Bootstrap Modal Overlaps MenuBootstrap 模态重叠菜单
【发布时间】：2014-01-30 03:34:44
【问题描述】：

我刚刚在 Wordpress 网站上的一个按钮上附加了一个引导模式，效果很好。

但问题是，模式在第一次处于非活动状态时会隐藏导航菜单（特别是“博客”链接）。打开模态并将其关闭后，模态消失，菜单正常工作。

我已经尝试了一些东西，比如摆弄 z-index，还尝试一起编写脚本：

<script>
jQuery(document).ready(function() {
  jQuery('#subscribe').modal('hide') 
});
</script>

到目前为止，还没有骰子。但也许你可以从脚本中看出，我只想在页面加载时将模式置于隐藏状态，并且只有在他们单击按钮时才会调用它。

这是我的网站。如果您尝试在笔记本电脑或更小的屏幕上单击“博客”链接，则不能，因为它被模式隐藏了：

http://jackalopemedia.com/jasontreu

感谢任何帮助！

【问题讨论】：

当页面加载时我看不到模型框。当我点击“SIGN ME UP”按钮时，模型框现在出现了。
现在请试一试，Selva
页面加载时看不到模型。它工作正常。
你可以点击“博客”导航项吗？你的屏幕尺寸是多少？
是的，现在我得到了错误

标签： javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-2

【解决方案1】：

好的，我找到了解决方案

您必须添加一个名为hide 的类。因为fade函数是设置opacity:0的div。所以它只是隐藏在页面的前面。

所以你的行应该是

<div id="subscribe" class="modal hide fade" role="dialog">

更多详情请访问bootstrap

【讨论】：

【解决方案2】：

将您的模态与此进行比较，如果您的代码与此匹配，则它应该可以工作。

<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>

【讨论】：