Question

I am new to Bootstrap and am having a few issues getting modal dialogs to work correctly. Despite setting show:false, the dialog displays every time the page is refreshed.

Here’s a fiddle showing the issue: Fiddle

Code:

<a class="btn" data-toggle="modal" href="#modalwrapper" >Log On</a>


<div class="modal" id="modalwrapper">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h2>Log On</h2>
    </div>

    <div class="modal-body span7">    
      Body
    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>


$(function () {
    $('#modalwrapper').modal({
        backdrop: true,
        keyboard: true,
        show: false
    });
});

I have verified that the .modal call is being executed.

What am I doing wrong? Adding a display:none style addresses the issue but that is not the point.

Answer 1

Hide the modal using the provided hide bootstrap class

<div class="modal hide" id="modalwrapper">
  ..
</div>

which (by looking on bootstrap.css) is basically what you imagined

.hide {
  display: none;
}