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

Question

我设置了 daisyUI 但不知道如何按条件控制模式

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

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

库中的模态打开方法

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

Answer 3

所以，我将在这里为打开和关闭提供另一个答案

我的设置有点不同，因为我希望能够从我的应用程序的任何地方打开模式。 我正在使用 context 和 reducer 来处理更改，但是，相同的模式可以在传递 props 的父子之间使用。

如果您不想使用道具，您应该可以使用此处找到的 daisyui 文档中所示的模式：

https://daisyui.com/components/modal/#

<!-- The button to open modal -->
<label htmlFor="my-modal-4" className="btn modal-button">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" className="modal-toggle" />
<label htmlFor="my-modal-4" className="modal cursor-pointer">
  <label className="modal-box relative" for="">
    <h3 className="text-lg font-bold">Congratulations random Internet user!</h3>
    <p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
  </label>
</label>

但是，如果您想从触发器中分离出您的模态，因为您想以编程方式从不同的组件打开模态，这里是我用来传递“显示”道具并仍然使用checkbox input的示例关闭或通过切换“显示”道具

    <>
    // here, this input will cover the window space behind the modal
    // onChange event will need to handle the close
    // and you will need a 'checked' attribute that gets the state value
    // finally, 'id' will be used to interact with the modal
      <input
        checked={show}
        className="modal-toggle"
        id="main-modal"
        onChange={handleCloseModal}
        type="checkbox"
      />
    // here, we can use a label component to capture the click and intercept it
    // before it hits the input "behind" it / I'm using clsx for conditional classes
      <label
        htmlFor="main-modal"
        className={clsx('modal', {
          'modal-open': show,
        })}
      >
        <label className="modal-box relative">
          <h3 className="font-bold text-lg">
            Congratulations random Internet user!
          </h3>
          <p className="py-4">
            You've been selected for a chance to get one year of subscription to
            use Wikipedia for free!
          </p>
          <div className="modal-action">
            <label htmlFor="main-modal" className="btn">
              Yay!
            </label>
          </div>
        </label>
      </label>
    </>