9

I got a page with a bootstrap modal on it (manual: http://getbootstrap.com/javascript/#modals).

I would like to have this modal open on page load. However this is not happening.

<!-- 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. The modal is opening when I press the button. 

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

I tried several things, but I can't get it to work that the modal opens itself on page load. I have both the js and css of bootstrap called in the html head.

<!-- 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?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Paul
  • 634
  • 3
  • 7
  • 18
  • Now on JSFiddle it all seems to work without a problem. http://jsfiddle.net/uvnggL8w/ I really don't get it. – Paul Jan 21 '15 at 13:22

2 Answers2

25

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

$(document).ready(function () {

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

});

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

haxtbh
  • 3,467
  • 1
  • 21
  • 22
  • I like this answer. I'm using MVC to dynamically create a Modal via ajax and needed it to appear on the page when the user clicked on something. This did the trick! (I had a Partial View in the Body of the Modal that returned a dynamic Partial View that was dependent upon what they clicked - hence why a static Modal would not work in my instance). Also, sometimes, I can understand if you need to Alert the user about something when a Page initially loads (e.g. agree to terms, ask to turn off an ad-blocker, inform about maintenance windows, etc...) – MikeTeeVee Jul 19 '16 at 10:25
  • I have did the same thing, initially when page loads it displays the Modal, but for next subsequent page refresh/reload, it does not show the modal. Again after sometime it shows in between. what can be the reason? – Sagar Mahajan Jul 29 '16 at 05:51
  • This should be the accepted answer – srt8driver Apr 09 '18 at 15:08
8

I found the problem. This code was placed in a separate file that was added with a php include() function. And this include was happening before the Bootstrap files were loaded. So the Bootstrap JS file was not loaded yet, causing this modal to not do anything.

With the above code sample is nothing wrong and works as intended when placed in the body part of a html page.

<script type="text/javascript">
$('#memberModal').modal('show');
</script>
Paul
  • 634
  • 3
  • 7
  • 18