Bootstrap 5 modal won't dismiss

Question

All my modal forms are working fine. But here's one I ported from Bootstrap 4 to Bootstrap 5 and it won't close. The Close button (the X at the top of the popup) won't close the modal. And the Cancel button won't close the modal.

I updated data-dismiss to data-bs-dismiss . I don't know what else I'm missing. There are no JavaScript errors.

 $('#open-modal').on('click', function() { var $modal = $('#date-filter-modal'); $modal.show(); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <button id="open-modal" type="button" class="btn btn-primary">Open Modal</button> <div id="date-filter-modal" class="modal" tabindex="-1" role="dialog"> <form method="get"> <input type="hidden" name="ftype" /> <input type="hidden" name="fid" /> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Start Date</label> <input class="form-control start-date" type="date" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">End Date</label> <input class="form-control end-date" type="date" /> </div> </div> </div> </div> <div class="modal-footer d-flex justify-content-between"> <div> <button type="button" class="clear-date-filter btn btn-danger">Clear</button> </div> <div> <button type="submit" class="btn btn-success">Set Filter</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> </div> </div> </div> </div> </form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

Can anyone suggest what I might have missed?

Answer 1

I looks like you did not initialize the modal. Remove display: block from the modal and "show" it properly like so:

 let modal = new bootstrap.Modal('#date-filter-modal') modal.show()

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> <div id="date-filter-modal" class="modal" tabindex="-1" role="dialog"> <form method="get"> <input type="hidden" name="ftype" value="ShipDate"> <input type="hidden" name="fid"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Ship Date Filter</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Start Date</label> <input class="form-control start-date" type="date"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">End Date</label> <input class="form-control end-date" type="date"> </div> </div> </div> </div> <div class="modal-footer d-flex justify-content-between"> <div> <button type="button" class="clear-date-filter btn btn-danger">Clear</button> </div> <div> <button type="submit" class="btn btn-success">Set Filter</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> </div> </div> </div> </div> </form> </div>

Answer 2

Looks like I found the issue.

Under Bootstrap 4, I would display the modal like this:

$modal.modal();

This does nothing under Bootstrap 5, so I changed it to this:

$modal.show();

That works, but I guess it is no longer using the Bootstrap modal logic. It's simply making the form visible. Either way, it prevents the normal dismiss logic from working.

The correct syntax is:

$modal.modal('show');

Answer 3

You can try adding a function for .btn-close .

 let modal = new bootstrap.Modal('#date-filter-modal') modal.hide() $('#open-modal').on('click', function() { var $modal = $('#date-filter-modal'); modal.show(); }); $('.btn-close').on('click', function() { var $modal = $('#date-filter-modal'); modal.hide(); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <button id="open-modal" type="button" class="btn btn-primary">Open Modal</button> <div id="date-filter-modal" class="modal" tabindex="-1" role="dialog"> <form method="get"> <input type="hidden" name="ftype" /> <input type="hidden" name="fid" /> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Start Date</label> <input class="form-control start-date" type="date" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="control-label">End Date</label> <input class="form-control end-date" type="date" /> </div> </div> </div> </div> <div class="modal-footer d-flex justify-content-between"> <div> <button type="button" class="clear-date-filter btn btn-danger">Clear</button> </div> <div> <button type="submit" class="btn btn-success">Set Filter</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> </div> </div> </div> </div> </form> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>