如何在DOM中刪除額外的模式背景

Question

我有一個頁面，其中顯示了彈出模式，而背景色卻變淡了。 在此模式中，以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>

Answer 1

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

從引導文檔中，您可以看到一個允許禁用背景下降的屬性。

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

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

使用jsbin.com 在這里查看更多詳細信息，對我來說，這是在整個Web上編寫js代碼的最佳工具。

希望對您有幫助...