CODEWITHSUNDEEP
bootstrap-5bootstrap5-modal
Jordon
Jordon

Reputation: 33

.modal('hide') not working in Bootstrap 5

I have multiple modals in my site and I give them a class of modal. Then, in my javascript, when there is a successful form submission, I run the command:

$('.modal').modal('hide');

This closed my modal, as you would expect. The problem is, I recently upgraded to Bootstrap 5 and now this has stopped working.

I read in the BS 5 that the new way to close the modal is .hide(), so I updated my command to:

$('.modal').hide();

This does hide my modal; however, unlike BS4 with .modal('hide'), when I run the command .hide() in BS5, it doesn't get rid of the modal-backdrop fade show class from the page, which basically makes the page useless. I really just want it to function the way it did in BS4. Any help would be greatly appreciated!

Here is my code for my modal, if that helps in anyway:

<!--Update Status Modal-->
<div id="status-modal" class="modal fade draggable" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content loading">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <?php echo form_open('users/update_status', 'class="ajax-modal-form" id="frmStatusUpdate" novalidate' ); ?>
         <input type="hidden" name="userid" value="">
         <input type="hidden" name="currentstatus" value="">
         <div class="modal-body">
            <div class="row">
               <div class="col-12 text-center"><i class="fas fa-exclamation-triangle fa-10x" style="color: #F7D358;"></i></div>
            </div>
            <div class="row">
               <div class="col-12 text-center">User Account for <span id="fullname" name="fullname"></span> will be <span id="status"></span>. Are you sure?</div>
            </div>
            <div class="row text-center"style="padding-top: 15px;">
               <div class="col-6">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal" style="width: 100%"><i class="fas fa-times-circle"></i> No</button>
               </div>
               <div class="col-6">
                  <button type="submit" class="btn btn-primary" style="width: 100%"><i class="fas fa-thumbs-up"></i> Yes</button>
               </div>
            </div>
         </div>
         </form>
      </div>
   </div>
</div>

Upvotes: 1

Views: 1054

Answers (1)

Jordon
Jordon

Reputation: 33

I was able to fix this by hiding the background as well as the modal, using this code:

$('.modal').hide();
$('.modal-backdrop').remove();

It just seems strange to me that it worked perfectly in bootstrap 4 without having to also remove the backdrop, but in bootstrap 5, this is now required. If anyone knows of another way, that would be amazing.

Upvotes: 0

Related Questions