我正在使用twitter bootstrap模式,当我点击链接时,模态上仍会出现黑色淡入淡出。
仅供参考 - https://docs.google.com/file/d/0B7s0BYiHsMBtY1pLdmVsclpQXzA/edit?usp=sharing
这是我的代码:
<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>
答案 0 :(得分:1)
我找到了一个有效的例子here:
注意:如果要隐藏淡入淡出黑色,请从jquery中删除backdrop: true;
。
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:
#event-modal {
margin-top: 0;
}
答案 1 :(得分:1)
这看起来像CSS问题。
检查某些内容是否覆盖了您的模态z-index
属性,默认模式为:
.modal {
z-index: 1050;
}
背景:
.modal-backdrop {
z-index: 1040;
}
模态应具有更高的价值。
答案 2 :(得分:0)
相同的代码对我来说很好..检查你的JS文件是否正确添加..
ESP。 bootstrap-modal.js,bootstrap-transition.js
检查一下这个小提琴:
<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>