Launch Bootstrap Modal on Page Load

Question

I don't know JavaScript at all. The Bootstrap documentation says to

Call the modal via JavaScript: $('#myModal').modal(options)

I have no clue how to call this on a page load. Using the supplied code on the Bootstrap page I can successfully call the Modal on an element click, but I want it to load immediately on a page load.

Solution 1

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so:

JS

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

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

You can still call the modal within your page with by calling it with a link like so:

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>

Solution 2

You don't need javascript to show modal

The simplest way is replace "hide" by "in"

class="modal fade hide"

so

class="modal fade in"

and you need add onclick = "$('.modal').hide()" on button close;

PS: I think the best way is add jQuery script:

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

Solution 3

Just add the following-

class="modal show"

Working Example-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal show" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <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>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Solution 4

You can try this runnable code-

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <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>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

More can be found here.

Think u have your complete answer.

Solution 5

Update 2021

Bootstrap 5

Now that Bootstrap no longer requires jQuery, it's easy to show the modal using JavaScript..

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.toggle()

Demo

Bootstrap 4

The modal markup has changed slightly for Bootstrap 4. Here's how you can open the modal on page load, and optionally delay display of the modal...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds
    
    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Demo

View more solutions

Comments

[Miro]

@rlemon - Not necessarily; the question was strictly about Bootstrap modal and not running functions upon page load in general. Bootstrap modal can be manipulated via CSS classes as well, see one of the answers.

[user2290820]

this will help.simpler: w3schools.com/jsref/… with onload event

[Nick Green]

I've tried this method but get two issues. 1) the modal won't close. 2) The modal background has disappeared. Any ideas?

[Boris Burkov]

This solution's not working: the dialog is permanently stuck on top of the page. Also, if you use "fade" class along with "modal", the dialog won't appear at all.

[racl101]

This answer is correct. One thing to note is that this will NOT work at all on the document ready event: $(document).ready( ... . It will only work on the window load event: $(window).load( ... .

[Adam Joseph Looze]

Another important note: a lot of people post their javascript includes at the end of the body. in which case, the onload function must be included at the end, after the includes.

[Randy Greencorn]

The jquery solution above works nicely. One line of code does the trick. @NickGreen Give this a try: class="modal fade". Remove 'hide' and 'in'. This works in my case but it's not live yet, otherwise I'd post the link.

[Professor of programming]

It depends on what scenario the modal needs to be displayed, in my case I want the modal to be permanently stuck.

[DutchKevv]

Setting a timeout for the DOM to be ready is the ultimate bad practise.. What if the user has a slow connection? Than it could take 10 seconds.. So never NEVER do this

[MikeTeeVee]

@racl101 It's the opposite for me (it's been 2 years since your post, so things might have changed). It only works with $(document).ready( ... when I store this script in an MVC PartialView for my Modal that is dynamically added when a user clicks on something, so maybe that's why. Ironically, your warning of what not to do allowed me to figure out how to make it work for me. So thanks? :)

[Admin]

Encountered Bob's problem as well

[RafaSashi]

Good suggestion. Thanks!

[Admin]

Why have close buttons if they won't do anything? Is there any way to get this to work?

[DanielaB67]

Thanks for publishing the links necessary for the head:)

[Saw-mon and Natalie]

@boris, add this to the modal close button: onclick = "$('.modal').removeClass('show').addClass('fade');"

[Malachi]

Change <div class="modal show" id="myModal" role="dialog"> to <div class="modal" id="myModal" role="dialog"> (as in, remove show). After that, the modal will work and it will also disappear when you click on the close button.

[Malachi]

Hide didn't work for me (as class), since bootstrap overruled it and therefore wouldn't show anything. It looked terrible (not like a modal) and it also didn't close when you pressed the button. The javascript part worked, but I would suggest to use the html part of the modal that GAURAV MAHALE used in his answer, but note to remove the word 'show' in the class of his modal.

[ersks]

Just include jQuery Library first !

[Felipe Lima]

@EduardoCuomo yes, it work's jsfiddle.net/bsmpLvz6 This example was made using Bootstrap 3.3 and jQuery 2.2

[EvilSmurf]

@racl101 works in 2020 tho: $(document).on('ready',function() ...

[Semmerket]

For me, this code was the only one that runned beautifully. Thanks.

[Mike]

Alternatively, you can use the "data-show" attribute: getbootstrap.com/docs/4.5/components/modal/#via-data-attribu‌​tes

[Nazehs]

what you have can't work for the current version of bootstrap window.onload = () => { document.querySelector('[data-bs-target="#exampleModal"]').c‌​lick(); } is the correct one at the moment

[perymerdeka]

i use django too, but my bootstrap is not defined, how to import it?

[nicorellius]

You would set up BS according to their docs: getbootstrap.com/docs/5.0/getting-started/introduction. In my case, my base.html template defines all my CSS and JS in other templates, as needed, then I use the block.super variable to inject additional JS. But you can do this by putting the JS in a separate JS file, loaded at page load too, if youw ant.