title: Modal dialog doesn't show
body: <p>I've made a modal with the help of javascript. How come the modal doesn't come out? These are my codes:</p>
  
  <pre><code> &lt;button class="jobview-control btn-primary jobview-btn"  id="btn-show-modal"&gt;Recommend&lt;/button&gt;
  
      &lt;div class="modal hide" id="dialog-box"&gt;
        &lt;div class="modal-header"&gt;
            &lt;h2&gt;Header&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;p&gt;body body body&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
            &lt;p&gt;this is the Footer.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;script type="text/javascript"&gt;
       $(function(){
           $("#btn-show-modal").click(function(e){
               e.preventDefault();
               $("#dialog-box").modal('show');
           });
       });
    &lt;/script&gt;
  </code></pre>