如何在 DOM 中删除额外的模态背景答案

【问题标题】：How to remove extra modal backdrop in DOM如何在 DOM 中删除额外的模态背景
【发布时间】：2014-06-02 11:28:38
【问题描述】：

我有一个页面，其中在弹出模式中显示背景下降褪色。在这个模态中是一个在 html 中描述为 <a href="#" data-toggle="modal" data-target="blah"> show </div> 的链接将 blah 视为最初具有 hidden=true 并位于此模式中的 div。单击链接时，似乎在 DOM 中添加了另一个模态背景淡入淡出。当我在弹出窗口之外单击时，只有其中一个被删除，而另一个仍然存在，因此网页仍然褪色。

为什么会发生这种情况以及如何摆脱这种情况。

示例代码可在jsfiddle 中找到（注意：关闭按钮无关紧要，因为这似乎会在我的实际代码中从 dom 中删除所有背景淡入淡出。我只想知道如何在单击时使其工作在盒子外面）

Btn 3

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <a href="#" data-toggle="modal" data-target="#ref">save</a>
<div id="ref" hidden="true">
    <p>hi</p>
    </div>
</div>
</div>

【问题讨论】：

为什么要使用新的模态来显示#ref div？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您的答案是属性data-backdrop="false"

从bootstrap docs，您可以看到允许禁用背景的属性。

<a href="#" data-toggle="modal" data-backdrop="false" data-target="#ref">save</a>

<div id="ref" hidden="true">
  <p>hi</p>
</div>

查看更多详细信息here，使用 jsbin.com，这对我来说是在整个网络上编写 js 代码的最佳工具。

希望对你有帮助...

【讨论】：