title: Hide Bootstrap 5 Modal before .show() is finished
body: <p>In Bootstrap 5 calling <code>Modal.hide()</code> has no effect unless it occurs after the modal has finished the fade/transition effect.</p>
  <p>By removing the <code>fade</code> class the <code>hide</code> method acts instantly.</p>
  <p>How can I achieve that, while keeping the fade effect?</p>
  <p>In the below example, clicking on a button will show information about that item in a the modal. Suppose you accidentally clicked on the wrong button, you should be able to back-out (cancel the <code>.show()</code>) immediately so you can click on the correct button.</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;title&gt;Modal Test&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- Buttons --&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary item-button&quot; data-item-info=&quot;You clicked # 1&quot;&gt;
          Item # 1
      &lt;/button&gt;
  
      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary item-button&quot; data-item-info=&quot;You clicked # 2&quot;&gt;
          Item # 2
      &lt;/button&gt;
  
      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary item-button&quot; data-item-info=&quot;You clicked # 3&quot;&gt;
          Item # 3
      &lt;/button&gt;
  
      &lt;!-- Modal --&gt;
      &lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot;&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;
                      ...
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
          var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
              keyboard: false
          })
  
          $('.item-button').click(function(){
              $('#myModal').find('.modal-body').text($(this).data('item-info'))
              myModal.show();
          })
  
          $('.modal').click(function(e){
              if(!$(e.target).hasClass(&quot;modal-body&quot;)){
                  myModal.hide();
              }
          })
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>