How can I control daisyUI tailwind modal open as default

Question

I set daisyUI but not figure out how to control modal by condition

I think similar with flowbite or bootstrap https://flowbite.com/docs/components/modal/

but daisyUI not implement hidden class yet, and there have

modal-open method in libary

https://daisyui.com/components/modal/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

<!-- The button to open modal -->
<label for="my-modal-4" class="btn modal-button">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
  <label class="modal-box relative" for="">
    <h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
    <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
  </label>
</label>

so how can we config the modal view present visible?

thanks a lot

Answer 1

Open:

document.getElementById('your_modal').showModal();

Close:

document.getElementById('your_modal').close();

Answer 2

Just follow modal-id dynamic add/remove attributes '.modal-open' class by javascript will be done

    <label for="my-modal-4" class="btn modal-button modal-open">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
  <label class="modal-box relative" for="">
    <h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
    <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
  </label>
</label>

Answer 3

I know that this is kinda old question but might help someone in the future,

      <input
        checked={true}
        type="checkbox"
        id="add-new-phone-number"
        className="modal-toggle"
      />

you can bind the checked attributes of the input to your state if your using react

Answer 4

Another way of doing this would be by manipulating the input checkbox element inserted before the modal div. If you console log this element's value you'll notice that it's set to "true" when the model is open and "false" when it's closed.

If you want the modal to be open by default you can use:

document.getElementById('my-modal-4').checked = true;

when the page/component is rendered