Modal does not open when switching between pages until you refresh the page

[fakhredineOuahaqi]

in mobile screen when the page load for the first time and you click the button to open the modal it does open, but after you go to another page and try to open another modal it does not open and you should refresh the page again and again every time you go to another page.

[LluisR]

Same problem here with modal! The same error also occurs with the new carousel.

Flowbite verison ^1.4.7

[fakhredineOuahaqi]

i'v handled the open and close actions of the modal using useState and remove the 'data-modal-toggle'. that's what solve my problem !

[LluisR]

Could you share an example of your code, please?

[zoltanszogyenyi]

Hey @fakhredineOuahaqi, @LluisR,

Are you using this on a React project? Perhaps you might want to look into the standalone React component library:

https://github.com/themesberg/flowbite-react

[VictorJuez]

Same problem here, I'm using Vue. Could you please share more details on how you solved it? Thanks!

[VictorJuez]

Okay, so what I did to make it work is to create the Modal with Javascript (check here the flowbite documentation) instead of using this data-modal-toggle="defaultModal" property defined in the html component. Find below an example with Vue3 Single File Component. For other frameworks the solution should be similar.

<template>
  <!-- Modal toggle -->
  <button class="block 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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" @click="toggleModal">
    Toggle modal
  </button>

  <!-- Main modal -->
  <div id="defaultModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
      <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
          <!-- Modal content -->
          <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
              <!-- Modal header -->
              <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
                  <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                      Terms of Service
                  </h3>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" @click="toggleModal">
                      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></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">
                      With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                  </p>
                  <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
                      The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                  </p>
              </div>
              <!-- Modal footer -->
              <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
                  <button @click="toggleModal" type="button" class="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 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
                  <button @click="toggleModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
              </div>
          </div>
      </div>
  </div>
  </template>

  <script>
  export default {
      data() {
          modal: ''
      },
      methods: {
          toggleModal() {
              this.modal.toggle();
          }
      },
      mounted() {
          // set the modal menu element
          const targetEl = document.getElementById('defaultModal');

          // options with default values
          const options = {
          placement: 'center',
          backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
          onHide: () => {
              console.log('modal is hidden');
          },
          onShow: () => {
              console.log('modal is shown');
          },
          onToggle: () => {
              console.log('modal has been toggled');
          }
          };

          this.modal = new Modal(targetEl, options);
    } 
  }
  </script>

[shakhzodmax]

I tried your solution. But in my case it doesn't work. Output: Modal is not defined

[supergmax]

I solved the problem with using block instead of . blocks refresh the new page between two links. If you use a div and you can't or won't rewrite all the code : => nest

with

my code looking that and it's work

<a href"link">
    <div>
          ...
    </div>
</a>

I have had the same problem in my Angular Project.

I solve it by adding in TS file of your component ngOnInit() { initFlowbite() }

[ashokars]

@mbirame2 It works like charm. One thing i notice is custom settings made in tailwind config has been reset.

My expected design

When i init flow bite on that component

Overlay settings are reset to defaults instead

[Loukili-Rachid]

fixed on vitePress by adding on the component that has the modal:

onMounted(() => { initFlowbite(); });