javascript - Multiple bootstrap modals in a page

Question

I made a bootstrap modal - it's working fine. But when I want to use a modal somewhere else in my site it overwrites the other modal.

Which part of the code do I need to change? And do I have to add like thousands of extra code to javascript for each modal, or can I make a group code?

Thanks!

I added this:

$('#clickme').click(function(e) {
$('#showModal').modal('show');


<script>
    function showModal(){
        $("#showModal").modal("show");
     }
</script>

and:

<div class="modal fade" id="showModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button> 
                <h4 class="modal-title">Sign me up!</h4>
            </div>
        </div>
    </div>
</div>

Answer 1

Don't try to do this. Bootstrap's modal is not designed to support that. Its own documentation says

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

It should have said "a lot of custom code". For instance, BS modals use a class on the body element, that is removed when it closed. Therefore, closing a second modal will also hide the first. Then you need special code to detect that a modal was previously open and restore the class on the body. It's much more trouble than it's worth.

Instead, use a "poor man's modal" for the second modal, just an absolutely positioned div you pop up somewhere. You don't need the overlay covering the screen anyway since it's already there from the first modal.