Load Bootstrap modal automatically when page loads

Question

How to load Bootstrap model automatically when page loads?

I tried adding the following to my index file:

<script type="text/javascript"> $(window).load(function () { $('#myModal').modal('show'); }); </script>

But its not working.

what does your js console say? if no errors, put a breakpoint on the $('#myModal').modal('show'); line and see if it get's called. If it gets called and you have no error in the script console then please put the whole source so we can see the whole picture. — Razvan Pocaznoi
– Razvan Pocaznoi, Commented Nov 23, 2013 at 12:09
may be u have written this code at start of page..u need to write it after your modal window code..so content of modal get executed 1st and then it will launch.. — user2663434
– user2663434, Commented Nov 23, 2013 at 12:50
it's in the load event of the window, meaning that is executed after everything has been loaded — Razvan Pocaznoi
– Razvan Pocaznoi, Commented Nov 23, 2013 at 13:03
Create the modal first, then show it. You're trying to .modal('show') on nothing. — Deryck
– Deryck, Commented Nov 23, 2013 at 13:06
Google returns five more pages on stackoverflow with the same question. — Oliver
– Oliver, Commented Jan 11, 2014 at 21:08

Pranav 웃 · Accepted Answer · 2013-11-26 13:31:06Z

5

Try this, it should work :

<script type="text/javascript"> $(document).ready(function () { $('#myModal').modal('show'); }); </script>

edited Nov 26, 2013 at 13:31

Pranav 웃

8,4676 gold badges41 silver badges48 bronze badges

answered Nov 26, 2013 at 13:09

Black Ops

3742 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sven van den Boogaart Over a year ago

its not working for me, if i manualy click the link to the same div #myModal it opens the dialog..

Atomox · Accepted Answer · 2014-05-14 20:04:34Z

Building on Black Ops' answer, I noticed this might be addressing an older version of Bootstrap. In the newer version, the first time you click on the button, it initializes the modal. This needs to happen before it can be displayed. So, instead of: .modal(show), you need to do: .modal({show:true}), which initializes the modal instance, and then sets it to display by default. So:

<script type=\"text/javascript\"> jQuery(document).ready(function() { jQuery('#myModalId').modal({show:true}); }); </script>

You can also set other settings for the modal within those {}. See Bootstrap's Model Doc for setting details.

Kuba P · Accepted Answer · 2014-03-18 10:33:34Z

try specifing the value in the form which will act as default value

<div class="input-group date" id='dob' name="dob" data-date-format="yyyy-mm-dd" > <input type="text" name="dob" id="dob" ***value="1940-01-01***" maxlength="20" class="form-control" required title="Please enter the date of birth"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div>

and the script

<script type="text/javascript"> $(document).ready(function() { $('#dob').datepicker({ startDate: '1940-01-01', endDate: '-5d' }) }); </script

Collectives™ on Stack Overflow

Load Bootstrap modal automatically when page loads

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related