title: How do I show a bootstrap modal from within a javascript function?
body: <p>I have a button on my page that when it is pushed it triggers some javascript functions to occur, and one of those javascript functions to open a bootstrap modal, but I can't seem to get it to work.  Here is my code... please help.</p>
  
  <pre><code> //elsewhere on the form is the button that triggers the javascript
    &lt;a href="#" class="btn btn-danger" id="cancelPObtn" data-dismiss="modal"&gt;Yes, cancel it&lt;/a&gt;
  
   &lt;!-- CANCEL A PO MODAL --&gt;
   &lt;div class="modal hide fade" id="error-dialog" style="display: none;"&gt;
     &lt;div class="modal-header"&gt;
          &lt;a class="close" data-dismiss="modal"&gt;x&lt;/a&gt;
          &lt;h3&gt;Cancel Purchase Order?&lt;/h3&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
         &lt;a href="#" class="btn btn-danger btn-modal btn-cancel"  data-dismiss="modal"&gt;Yes, cancel it&lt;/a&gt;
         &lt;a href="#" class="btn" data-dismiss="modal"&gt;Nevermind&lt;/a&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
  
  
  
        $('.btn-danger').click(function(event) {
            if(some random conditional statement){
               //some stuff happens here
            }
            else{ 
                  //Show form validation error modal-- I know this part is triggered but the modal will not show
                  $("#error-dialog").modal("show");
            }
        });
  </code></pre>