Bootstrap modal opening on page load

Question

I have a page with a boot modal (manual: http://getbootstrap.com/javascript/#modals ).

I would like this one to be modally open when the page loads. However, this does not happen.

<!-- Modal --> <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> </div> <div class="modal-body"> <p>However the account provided is not known.<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p> <p>You will now be shown the Demo site.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script type="text/javascript"> <!-- $('#memberModal').modal('show'); //--> </script> 

Now, if I add a button to the code. When I press the button, the modal opens.

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal"> Launch modal </button> 

I tried a few things, but I can't get it to work so that the modal function opens when the page loads. I have js and css bootstrap called in html header.

 <!-- Bootstrap - Latest compiled and minified CSS --> <link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Bootstrap - Latest compiled and minified JavaScript --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

What am I doing wrong?

Answer 1

I found a problem. This code was placed in a separate file, which was added using the php include () function. And this includes before loading Bootstrap boot files. Thus, the Bootstrap JS file is not yet loaded, as a result of which this modal does nothing.

With the above code example, nothing is wrong and works as intended if it is placed in the body part of the html page.

 <script type="text/javascript"> $('#memberModal').modal('show'); </script> 

Answer 2

Use the document.ready() event around your call.

 $(document).ready(function () { $('#memberModal').modal('show'); }); 

jsFiddle updated - http://jsfiddle.net/uvnggL8w/1/