title: Modal display onclick jquery
body: <p>I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:</p>
  
  <p>Modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="commonModal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
  
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;.............&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  ..........
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Button: </p>
  
  <pre><code> &lt;button type="button" class="btn btn-secondary btn-view-details"
  data-toggle="modal"&gt; View Details&lt;/button&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>  $(document).ready(function(){
              $('button.btn-view-details').on('click', function () {
                  $('#commonModal').modal('show');
              })
   })
  </code></pre>