Bootstrap Modal visible on document load

Question

I have a Bootstrap Model working fine, except that it is visible when the document loads and I can't work out how to make the initial state invisible?

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div>

albertedevigo · Accepted Answer · 2012-09-27 11:40:48Z

12

Following documentation, add hide class to the modal.

<div class="modal hide fade"> ... </div>

answered Sep 27, 2012 at 11:40

albertedevigo

18.4k6 gold badges55 silver badges58 bronze badges

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

2 Comments

ThEBiShOp Over a year ago

The hide class is not needed anymore.

albertedevigo Over a year ago

@ThEBiShOp do you know from which version it is not needed anymore? An update to the answer would be great.

Myles McDonnell · Accepted Answer · 2012-09-27 10:49:35Z

4

Turns out simply adding style="display: none" to the modal outer div did the trick.

answered Sep 27, 2012 at 10:49

Myles McDonnell

13.4k20 gold badges70 silver badges123 bronze badges

Collectives™ on Stack Overflow

Bootstrap Modal visible on document load

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related