CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-modal
mastahb
mastahb

Reputation: 91

2 modals opening when using jquery

I've got 2 modals in my page. When calling the 2nd modal, both will open. What's wrong? 

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Modal Body</p>
                <button type="button" class="btn btn-default" data-dismiss="modal" href="otherpage.php">Continue</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" href="otherpage.php">Close</button>
            </div>
        </div>
    </div>
</div>      

<div id="modal2" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Modal Body</p>
                <button type="button" class="btn btn-default" data-dismiss="modal" href="otherpage.php">Continue</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" href="otherpage.php">Close</button>
            </div>
        </div>
    </div>
</div>

I'm loading bootstrap and i'm using this function to call the 2nd modal

$('#modal2').modal('show');

when calling this function the first modal will also show up. What's wrong? because I would expect only the 2nd modal to show.

Upvotes: 1

Views: 51

Answers (1)

mastahb
mastahb

Reputation: 91

The answer has been provided by @Josh Crozier.

There was some other dependancy in my code in my custom.js the function below was triggering the other modal. I was not aware of this.

$(window).on('shown.bs.modal', function() {
    $('#myModal').modal('show');
});

Thanks for the help!

Upvotes: 1

Related Questions