How to prevent modal appearing on page load while using backdrop:'static'

Question

I have a dialog box which should appear whenever I click on a checkbox. But it should not disappear when clicking outside or pressing escape . so I used backdrop='static' , keyboard='false' in my jquery. but then this dialog box is appearing whenever I load or refresh the page .

 $('#storeStatusDialog').modal({ backdrop: 'static', keyboard: false }) 

 <div class="container"> <div class="modal fade" id="storeStatusDialog" role="dialog" > <div class="modal-dialog armanlast"> <div class="modal-content"> <div class="modal-header"> <div class="close-icon-wrap"> <a class="modal-close-icon" href="#" data-dismiss="modal">×</a> </div> </div> <div class="modal-body"> <h1 class="modal-title1">Deactivate Store</h1> <p class="deactivate-p"></p> </div> <div class="modal-footer"> <button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button> <button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span></button> </div> </div> </div> </div> </div> 

Please tell me a way to prevent dialog box appearing when page gets loaded. thank you so much.

Answer 1

HTML:

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#storeStatusDialog">
    Launch
  </button>

  <div class="modal fade" id="storeStatusDialog" role="dialog">
    <div class="modal-dialog armanlast">
      <div class="modal-content">
        <div class="modal-header">
          <div class="close-icon-wrap">
          <a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
          </div>
        </div>

        <div class="modal-body">
          <h1 class="modal-title1">Deactivate Store</h1>
          <p class="deactivate-p"></p>
        </div>

        <div class="modal-footer">
          <button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
          <button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Js:

  $('#storeStatusDialog').modal({
    show: false,
    backdrop: 'static',
    keyboard: false
  })

Snippet:

http://codepen.io/anon/pen/dpEjxK