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

I guess this fiddle is pretty fine jsfiddle.net/yashhy/sj9EQ/1 — yashhy
– yashhy, Commented Jan 2, 2014 at 7:01

nxa · Accepted Answer · 2014-01-02 07:09:58Z

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>

Works like a charm! I just had to remove the fade class for the modal backdrop not to be totally dark. <div class="modal-backdrop in"></div>

Community · Accepted Answer · 2017-05-23 12:17:21Z

9

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>

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 2, 2014 at 7:27

Nishant

9147 silver badges18 bronze badges

2 Comments

Joel Cross Over a year ago

The author specifically asked for a solution that doesn't require using 'the need of a document.ready function or a body onload function'. I consider $(window).load to be much the same as onload, hence the downvote.

hello_earth Over a year ago

nevertheless useful for some - also $(window).load(... has to be replaced by $(windows).on('load', ....) for modern versions of jQuery. to get rid of "fade" effect just remove the "fade" class from the modal

Collectives™ on Stack Overflow

How to make modal dialog open at page load in bootstrap

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related