How to make modal dialog open at page load in bootstrap

Question

It\'s easy to show a modal dialog with javascript in Bootstrap.

But how to make the modal open at page load without the need of a document.ready functio

Answer 1

Have a look at this Launch Bootstrap Modal on page load from Andres Ilich

JS

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

Answer 2

When modal becomes visible, Bootstrap adds .in class to the it's container. So you can add a rule in your css as below and add the same class to modal - which you want to be visible at page load.

CSS

.modal.in {
   display:block;
}

HTML

<div class="modal in">visible on page load.</div>

But these will not bring the modal backdrop in place. So you gotta keep those also in bottom of page:

<div class="modal-backdrop fade in"></div>