Bootstrap: more than one modal

Question

I use two boot modules on my website:

<!---- 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 launched using:

 <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 appears. My second post-comment not displayed. There are no JS errors on the console.

Any suggestions?

Answer 1

To both work. Just put them in separate containers and not one by one.

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>