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 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()
}