title: Uncaught TypeError: $(...).modal is not a function
body: <p>I want to show a modal in my website on page load. But I got this error</p>
  
  <blockquote>
    <p>Uncaught TypeError: $(...).modal is not a function</p>
  </blockquote>
  
  <p>I have also tried with <code>jQuery</code> but also get the same type of error</p>
  
  <blockquote>
    <p>Uncaught TypeError: jQuery(...).modal is not a function</p>
  </blockquote>
  
  <p>I have googling already several times and apply different solutions but not succeeded. </p>
  
  <p><strong>Here is my script</strong></p>
  
  <pre><code>&lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
     $(window).on('load',function(){
        $('#loadModal').modal('show');
     });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here is my modal</strong></p>
  
  <pre><code>&lt;div class="modal hide fade" id="loadModal"&gt;
      &lt;div class="modal-header"&gt;
           &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
           &lt;h3&gt;Modal header&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
           &lt;p&gt;One fine body…&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
           &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
           &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>