title: Bootstrap modal not showing up on click
body: <p>when I try to load a modal in Bootstrap, it shows up when I refresh the page but doesn't show up when I click on the button. I'd like my modal to pop up only when the user clicks on the button.</p>
  
  <p>My <strong>html</strong> file is set up as follows:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;my title here&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"&gt;
      &lt;script src="/static/js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/js/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/Highcharts-5.0.14/code/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src="/static/Highcharts-5.0.14/code/modules/exporting.js"&gt;&lt;/script&gt;
      &lt;!-- Our Custom CSS --&gt;
      &lt;link rel="stylesheet" href="/static/css/style_charts_black.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>I've copied this code from the Bootstrap tutorial website:</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float:right; margin-right:100px"&gt;
  Launch demo modal
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
        ...
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;$('#myModal').modal('show')&lt;/script&gt; 
  </code></pre>
  
  <p>I do not get any jquery errors in the javascript console. I've also tried to change the last line above to <em>.modal('toggle')</em> but it didn't help.</p>