show modal window using javascript

Question

I want to display modal dialog based on a bool variable in javascript. The best would be to bind bool variable to some attribute (eg visibility) and when the variable is true, modal dialog appears and if it is false it will be dismised ("background" site will be displayed).

I use this bootstrapious template with jquery 1.9.1 and bootstrap 3.3.7. I found some related topics in the internet, I tried to use them:

1) at first I used some attribute of modal dialog div, like visibility, where I would use my code that will output true or false. I meant something like using style="visibility:hidden" / visible , but when it was set to visible it didn't appear automatically.

2) using hints from getbootstrap.com: $('#myModal').modal('show') and other variants appearing onload or on document ready

$(document).ready(function(){
   jQuery.noConflict();
   $('#myModal').modal('show');
});

or

    $(document).on('load',function(){
        $('.modal').modal('show');
});

none of the works.

Finally I would use something like

if(myVar == true)
     modal.show()
else
     modal.hide()

Is it even possible to realize that? Any help is appreciated!

Answer 1

Try this !

HTML

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

and javascript

jQuery(document).ready(function(e) {
    jQuery('#myModal').modal();
});