4

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/daisyui@2.13.6/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

Ymow Wu
  • 193
  • 2
  • 2
  • 14

3 Answers3

12

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

tesSb99
  • 121
  • 1
  • 3
6

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

KingsGambit
  • 61
  • 1
  • 1
0

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>
Ymow Wu
  • 193
  • 2
  • 2
  • 14
  • 1
    I don't understand your answer can you provide an example ? – Toothgip Apr 12 '22 at 09:00
  • 2
    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' – Ymow Wu Apr 21 '22 at 04:29