Question

我有一个页面，其中显示弹出模式，后退褪色。在此模式中，html中描述的链接为<a href="#" data-toggle="modal" data-target="blah"> show </div> 考虑blah是一个最初隐藏= 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"

从bootstrap docs您可以看到允许禁用后退的属性。

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

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

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

我希望这可以帮助你...

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

1 个答案: