twitter-bootstrap 引导程序：不止一个模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16344377/
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
bootstrap: more than one modal
提问by Jay
I'm using two bootstrap modals on my site:
我在我的网站上使用了两个引导模式：
<!---- modal 1 ---->
<div id="send-pm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="send-pm" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Send Foobar a PM</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">Cancel</button>
<button class="btn btn-primary">Send</button>
</div>
<!---- modal 2 --->
<div id="post-comment" class="modal hide fade" tabindex="-2" role="dialog" aria-labelledby="post-comment" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Post a Comment</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">Post</button>
</div>
They are triggered by:
它们由以下触发：
<a href="#send-pm" data-toggle="modal" class="btn btn-small"> Send PM </a>
<a href="#post-comment" data-toggle="modal" class="btn btn-small"> Post Comment </a>
However, only the first one shows up. My second one post-commentis not showing up. There are no JS errors on console.
然而，只有第一个出现。我的第二个post-comment没有出现。控制台上没有 JS 错误。
Any suggestions?
有什么建议？
回答by PSL
To make both of them work. Just put them in separate containers instead of one after the another.
使两者都起作用。只需将它们放在单独的容器中，而不是一个接一个。
Demo
演示
<a href="#send-pm" data-toggle="modal" class="btn btn-small"> Send PM </a>
<a href="#post-comment" data-toggle="modal" class="btn btn-small"> Post Comment </a>
<div>
<!---- modal 2 --->
<div id="post-comment" class="modal hide fade" tabindex="-2" role="dialog" aria-labelledby="post-comment" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Post a Comment</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">Post</button>
</div>
</div>
<div>
<!---- modal 1 ---->
<div id="send-pm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="send-pm" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Send Foobar a PM</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">Cancel</button>
<button class="btn btn-primary">Send</button>
</div>
</div>
