Menu
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-comment is not showing up. There are no JS errors on console.
Any suggestions?
251
Multiple Modals on a Page - Bootstrap 4 Code Snippet (2021) - Bootstrap Creative Multiple Modals on a Page Bootstrap Code Snippet. Quickly jumpstart your next project with this Bootstrap CSS compatible code samples. See Demo Toggle navigation Shop HubSpot Themes Website Optimization Services Multiple Modals on a Page
Inner-workings may be simple when dealing with a single modal but when managing multiple modals, it becomes a lot more problematic.
Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals. Add the size class to the <div> element with class .modal-dialog: By default, modals are medium in size. For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference.
You could create as many modals as you want by using this structure and making sure each button's data-target references a unique id of a modal. There are two things, data-toggle="modal" and data-target="#modalId"
To make both of them work. Just put them in separate containers instead of one after the another.
<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>
<!---- 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>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
