twitter-bootstrap Twitter 引导模式淡入淡出黑色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15874225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap modal fade black
提问by Sriram
I'm using twitter bootstrap modal,when I click the link,still black fade appears on the modal.
我正在使用 twitter bootstrap 模态，当我点击链接时，模态上仍然出现黑色淡入淡出。
FYI - https://docs.google.com/file/d/0B7s0BYiHsMBtY1pLdmVsclpQXzA/edit?usp=sharing
仅供参考 - https://docs.google.com/file/d/0B7s0BYiHsMBtY1pLdmVsclpQXzA/edit?usp=sharing
Here is my code:
这是我的代码：
<ul class="nav pull-right">
<li><a href="#myModal" data-target="#myModal" data-toggle="modal">Signin</a></li>
</ul>
<div id="myModal" class="modal hide fade" 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 body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
采纳答案by Kees Sonnema
I found an working example here:
我在这里找到了一个工作示例：
NOTE: when you want to hide the fade black just remove backdrop: true;from the jquery.
注意：当您想隐藏淡入淡出的黑色时，只需backdrop: true;从 jquery 中删除即可。
HTML:
HTML：
<div id="event-modal" class="modal hide fade">
<div class="modal-header">
<a class="close" href="#">x</a>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>Some information</p>
</div>
<div class="modal-footer">
<a class="btn primary" href="#">Primary</a>
<a class="btn secondary" href="#">Secondary</a>
</div>
</div>
<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>
JQUERY:
查询：
$(function() {
$('#event-modal').modal({
backdrop: true
});
});
CSS:
CSS：
#event-modal {
margin-top: 0;
}
回答by Dmonix
This looks like CSS issue.
Check if something doesn't overwrite your modal z-indexproperty, by default modal has:
这看起来像 CSS 问题。检查某些内容是否不会覆盖您的 modalz-index属性，默认情况下 modal 具有：
.modal {
z-index: 1050;
}
And backdrop:
和背景：
.modal-backdrop {
z-index: 1040;
}
Modal should have higher value.
模态应该有更高的价值。
回答by Raghuveer
Same code working fine for me.. Check your JS files were added properly or not..
相同的代码对我来说工作正常.. 检查您的 JS 文件是否正确添加..
Esp. bootstrap-modal.js, bootstrap-transition.js
特别是 bootstrap-modal.js, bootstrap-transition.js
check once this fiddle:
检查一次这个小提琴：
<ul class="nav pull-right">
<li><a href="#myModal" data-target="#myModal" data-toggle="modal">Signin</a></li>
</ul>
<div id="myModal" class="modal hide fade" 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 body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
