title: Bootstrap 5 - Modal Open on Page Load
body: <p>I am trying to implement a modal that opens automatically when the page is loaded for a school assignment. I am using Bootstrap 5 and all the examples I have found online use older versions. The modal can be found under the comment <code>Vertically Centered Cookies Modal</code>. I have used a Bootstrap CDN as well as the Popper Bundle from <a href="https://getbootstrap.com/" rel="nofollow noreferrer">https://getbootstrap.com/</a>. This is my code:</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang=&quot;en-AU&quot;&gt;
  &lt;head&gt;
      &lt;!-- Require Meta Tags --&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          
      &lt;!-- CDN - Bootstrap CSS --&gt;
          &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
      
      &lt;!-- Title --&gt;
          &lt;title&gt;Title Here&lt;/title&gt;
      
      &lt;!-- Webpage Icon --&gt;
          &lt;link rel=&quot;shortcut icon&quot; href=&quot;Images\Pilot640_Logo_Symbol.ico&quot;/&gt;
          
  
  &lt;/head&gt;
  
  &lt;body&gt;      
  
  &lt;!-- Nav Bar --&gt;
  &lt;nav class=&quot;navbar navbar-expand-sm bg-secondary navbar-white&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;Images\Pilot640_Logo_Symbol.ico&quot; alt=&quot;Logo&quot; style=&quot;width:100px;&quot; class=&quot;rounded-pill&quot;&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;!-- Header Section --&gt;
  &lt;header&gt; 
  
  &lt;/header&gt; 
  
  &lt;!-- Vertically Centered Cookies Modal --&gt;
  
  &lt;div class=&quot;modal-dialog modal-dialog-centered&quot; id=&quot;onload&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
              &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Do You Want Cookie? We Want Yours! &lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
              This site uses cookies to personalies the content for you.
          &lt;/div&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-bs-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Bootstrap Bundle with Popper --&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      
  &lt;!--Modal JS Script --&gt; 
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(window).load(function(){
          $('#onload').modal('show');
      });
  &lt;/script&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>If anyone knows what the problem is or how to make one, the help would be greatly appreciated.</p>