CODEWITHSUNDEEP
javascripttwitter-bootstrap
fluminis
fluminis

Reputation: 4059

How to make modal dialog open at page load in bootstrap

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 function or a body onload function?

My need is to load a page and have the modal allready opened. I don't want a delay nor a transition effect when the page load. I want that the modal is opened at startup.

I look the modal.js a little bit and tried adding class="modal-open" on the body with no effect.

<div class="modal in" id="journalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">modal title</h4>
      </div>
      <div class="modal-body">
         body
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Is it possible? How to do it ?

Upvotes: 9

Views: 67337

Answers (2)

Nishant
Nishant

Reputation: 916

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>

Upvotes: 9

absqueued
absqueued

Reputation: 3063

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>

Upvotes: 13

Related Questions