Flowbite modal backdrop not hide when close with function

Question

When i close Modal by function the backdrop dont hide until I press on ESC key

  <div class="block space-y-4 md:flex md:space-y-0 md:space-x-4">
        <!-- Modal toggle -->
        <button data-modal-target="small-modal" data-modal-toggle="small-modal"
            class="block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
            type="button">
            Small modal
        </button>
    </div>

    <!-- Small Modal -->
    <div id="small-modal" tabindex="-1"
        class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative w-full max-w-md max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-5 border-b rounded-t">
                    <h3 class="text-xl font-medium text-gray-900">
                        Small modal
                    </h3>
                    <button type="button"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                        data-modal-hide="small-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="p-6 space-y-6">
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                        lorem ipsum
                    </p>
                    <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                        Lorem ipsum
                    </p>
                </div>
                <!-- Modal footer -->
                <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
                    <button data-modal-hide="small-modal" type="button"
                        class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10">Decline</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
    <script>
        const smallmodal = new Modal(document.getElementById('small-modal'));

        function closemodal() {
            smallmodal.hide();
        }
    </script>

basically i try to close modal by function only, this modal will contain form, after testing the field and if everything is all right i will run async function to write in database

Answer 1

I needed an answer for closing a flowbite modal with an internal form post-submission.

Selecting the modal and using

new Modal(document.getElementById('modal-here'))

to create it programmatically, then calling hide(), works. However, this seems to confuse the DOM and prevents re-opening the modal without refreshing.

The simplest solution, recommended in the docummentation, is using data-attributes. So, the form's submit button should include data-modal-hide="modalID"

Example:

<button
  type="button"
  data-modal-target="some-modal"
  data-modal-toggle="some-modal"
>
  Edit
</button>

<div
  id="some-modal"
  tabIndex={-1}
  aria-hidden="true"
>
  ...
  ...
  <form onSubmit={handleSubmit(onSubmit)}>
    ...
    <button
      type="submit"
      disabled={isSubmitting}
      data-modal-hide="some-modal"
    >
      {isSubmitting ? <Spinner size={4} /> : "Submit"}
    </button>
  </form>

• Next.js 14.1.0
• React & React DOM 18.2
• Flowbite 2.2.1

Answer 2

if anyone still facing the problem,closing flowbite modal programatically, i have resolve the issue with this :

 closeUserModal(){
const $targetEl = document.getElementById('updateUserModal');
const modal = new Modal($targetEl);
modal.hide();

}

Answer 3

I encountered the same issue. Flowbite modal have _destroyBackdropEl() function and _backdropEl variable but none of them works for me. Then I decided to manually remove the backdrop after hiding the modal. Here's the workaround that worked for me.

const smallModal = new Modal(document.getElementById('small-modal'))

function closeModal() {
    smallModal.hide()
    document.querySelector("body > div[modal-backdrop]")?.remove()
}