如何控制默认打开的daisyUI顺风模式？

Question

我设置了daisyUI，但不知道如何根据条件控制模态

我认为类似于flowbite或引导https://flowbite.com/docs/components/modal/

但是daisyUI还没有实现隐藏类，而且

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>

​

那么，我们如何配置现在可见的模态视图呢？

非常感谢

Answer 1

另一种实现此操作的方法是操作插入在模式div之前的输入复选框元素。如果您控制台记录这个元素的值，您会注意到当模型打开时，它被设置为"true“，而当模型关闭时，它被设置为"false”。

如果您希望默认情况下打开模式，可以使用：

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

当呈现页面/组件时

Answer 2

只需遵循modal动态添加/删除属性‘.modal’类，javascript将完成

    <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>