How to control modal opening/closing without an input tag in daisyui?
Problem Description:
I’m using daisyui in svelte, and I don’t know how to use the modal programmatically without <input>
tag or <a>
tag, is it possible to do? I want to be able to control the open/close of the modal through javascript. What’s the most elegant way to do it?
The modal component is here.
Found this solution on the web, but isn’t it kind of complicated for such a simple functionality?
Also tried to use the official example without <input>
or <a>
, replaced with {#if opened}
, but failed to open the modal
Solution – 1
By default the component uses a checkbox state to open/close the modal. This makes it possible to add this interactivity without any JS at all. The documentation however states that there also is the class modal-open
:
Add/remove this class to open/close the modal using JS
So that could be used with a local flag via class:modal-open={opened}
.