Bootstrap modal won't close in Laravel project

Question

I am working on a Laravel project. After submitting the forms, if the validators are ok, it pops up a bootstrap modal, like the following.

@php
   if(session('message_success')) {
       echo "<script>
                $('#thank-you').modal('show');
             </script>";
   }
@endphp

The modal shows accordingly, but for some reason, I can't close it.

Modal

<div class="modal" id="thank-you" tabindex="-1"
     aria-labelledby="anyotherlabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal" aria-label="Close"
                        style="float: right;"></button>
                <div class="text-center py-3">
                    <h3 class="title-form-catalogue">The Club is thankful
                        for your request!</h3>
                    <p>Take a look at your e-mail to get access to the prestigious
                        information you required.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Clicking outside of the modal closes it, but clicking the button does nothing.

In some cases, I have read that the fade class seems to be preventing the modal from closing, but I'm not sure this is the issue here. I would really appreciate some help.

Answer 1

I managed to find a solution. I added a "closeButton" Id to the button, and then used the following code:

$("#closeButton").click(function () {
    $('body').removeClass('modal-open');
    $('body').css('padding-right', '');
    $(".modal-backdrop").remove();
    $('#thank-you').hide();
});