title: Bootstrap 5 Modal Doesn't Show with Fade Class
body: <p>When I add the fade class to my Bootstrap 5 modal, it doesn't show. If I remove the class, the dialog shows but the body isn't greyed out nor does the modal animate. My HTML is:</p>
  <pre><code> &lt;div class=&quot;modal fade&quot; tabindex=&quot;-1&quot; id=&quot;forgot_block&quot; aria-labelledby=&quot;label-forgot_block&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog &quot; style=&quot;border-radius: 10px;&quot;&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
                  &lt;div class=&quot;modal-header ui-widget-header&quot;&gt;
                      &lt;h5 class=&quot;modal-title&quot; id=&quot;label-forgot_block&quot;&gt;Forgot Password&lt;/h5&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;
                      &lt;b&gt;Please enter your email address below and a new temporary password will be sent to you.&lt;/b&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;input type=&quot;text&quot; name=&quot;current_email&quot; id=&quot;current_email&quot; placeholder=&quot;email address&quot; size=&quot;40&quot; onkeyup=&quot;checkKey(event,'sendPassword_exec'&quot;&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;div id=&quot;dialog_alert-forgot_block&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-footer&quot; id=&quot;dialog_buttons_box-forgot_block&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>To show the modal, my JS code is:</p>
  <pre><code>var modal = $(&quot;#forgot_block&quot;).modal();
  modal.show();
  </code></pre>
  <p>I'm sure I'm missing something simple.</p>