如何控制daisyUI tailwind模态默认打开

Question

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

我认为与 Flowbite 或 Bootstrap 类似 https://flowbite.com/docs/components/modal/

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

库中的模式打开方法

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>

那么我们如何配置当前可见的模态视图呢？

非常感谢

Answer 1

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

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

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

当页面/组件渲染时

Answer 2

我知道这是一个有点老的问题，但可能会对将来的人有所帮助，

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

如果你使用react，你可以将输入的检查属性绑定到你的状态

Answer 3

只需通过 javascript 跟随 modal-id 动态添加/删除属性 '.modal-open' 类 将会完成

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

打开： document.getElementById('your_modal').showModal();

关闭： document.getElementById('your_modal').close();