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

Matted

Answer 1

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

Kidnap

Answer 2

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

Toilworn

Answer 3

Open:

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

Close:

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

Cervine

Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Slut

Answer 4

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>

Matted

I don't understand your answer can you provide an example ? – Doublequick

Hi there, it's means add modal-open class to your modal can open modal view as daisyUI official support, and when you need to close modal, just remove attributes '.modal-open' – Matted