如何控制 daisyUI 顺风模式默认打开答案

【问题标题】：How can I control daisyUI tailwind modal open as default如何控制 daisyUI 顺风模式默认打开
【发布时间】：2022-06-20 17:26:28
【问题描述】：

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

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

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

库中的modal-open方法

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>

那么我们如何配置显示的模态视图呢？

非常感谢

【问题讨论】：

标签： javascript ruby-on-rails modal-dialog tailwind-css daisyui

【解决方案1】：

只需按照 modal-id 动态添加/删除属性 '.modal-open' 类通过 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>

【讨论】：

我不明白你的答案，你能举个例子吗？
你好，意思是在你的modal中添加modal-open类可以打开modal view作为daisyUI官方支持，当你需要关闭modal时，去掉属性'.modal-open'

【解决方案2】：

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

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

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

当页面/组件被渲染时

【讨论】：