Using Flowbite and Tailwind, the button to show a modal stays disabled when using modal.hide()

I am using the button to display a Flowbite modal

<button id="model-but" data-modal-target="extralarge-modal" data-modal-toggle="extralarge-modal" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded " >
  Create a News Article
</button>

The modal code is this (I have removed a lot of the inner code since it is verbose:

<div id="extralarge-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-7xl max-h-full">
    BUNCH of stuff removed
  </div>

  <div class="flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse border-t border-gray-200 rounded-b dark:border-gray-600">
    <button id="save-article" type="button" class="bunch removed">Save</button>
    <button data-modal-hide="extralarge-modal" type="button" class="bunch removed">Cancel</button>
  </div>
<div>

On the save button, I have removed the data-modal-hide="extralarge-modal".

In my JavaScript I have

const $targetEl = document.getElementById('extralarge-modal');
const modal = new Modal($targetEl);
$('#save-article').click(function(event){
  modal.hide();
});

The modal.hide() hides the modal, but everything else is still behind the modal-backdrop div.

What is the correct way to remove it?

Thanks for any help

Solution

You're creating your own instance of the Modal class. This would be in addition to the one that would automatically be instantiated by Flowbite's JavaScript.

Instead of creating your own Modal instance, consider getting the auto-created instance and calling .hide() on that:

$('#save-article').click(function() {
  window
    .FlowbiteInstances
    .getInstance('Modal', 'extralarge-modal')
    ?.hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" integrity="sha512-75dkJxTte+gUDJlkLYrVF5u55sGUQpYuGiDaMtsSq+jmblR1yBv1QgKNi3vDcjo4E2Nk/7LOYV65Cq8gkfQGJw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js" integrity="sha512-khqZ6XB3gzYqfJvXI2qevflbsTvd+aSpMkOVQUvXKyhRgEdORMefo3nNOvCM8584/mUoq/oBG3Vb3gfGzwQgkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.1.4"></script>

<button id="model-but" data-modal-target="extralarge-modal" data-modal-toggle="extralarge-modal" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded " >
  Create a News Article
</button>

<div id="extralarge-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-7xl max-h-full">
    BUNCH of stuff removed
  </div>

  <div class="flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse border-t border-gray-200 rounded-b dark:border-gray-600">
    <button id="save-article" type="button" class="bunch removed">Save</button>
    <button data-modal-hide="extralarge-modal" type="button" class="bunch removed">Cancel</button>
  </div>
<div>