另一种方法是操作modal div之前插入的input checkbox元素。如果你控制台记录这个元素的值，你会注意到当模型打开时它被设置为“true”，当模型关闭时它被设置为“false”。
如果您希望默认打开模态，可以用途：

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

当呈现页面/组件时

只需按照modal-id动态添加/删除属性，JavaScript的.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>

我知道这是个老问题了但也许能在将来帮上忙，

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

如果使用react，则可以将输入的选中属性绑定到状态