🧵 Saturday brain stream about @tailwindcss DaisyUI pure CSS modals.
I think it's cool how these are setup. Here are some of my findings and a @sveltejs component I made to make them better for my use case.
All of the modals pretty much look the same, styles are for later, in this thread I just want to talk about the cool ways they are triggered and multiple implementations. Here's the basic config, I'll go over the examples found on this page.
daisyui.com/components/modal/#
1. Modal using label + hidden checkbox
This is a pretty flexible method. When you click that label that looks like a button, It checks the checkbox that it is "for". Here's usage + how Daisy does this. They use :checked plus the CSS sibling selector (+).
Checkbox modals are cool because you can change the state of that checkbox and your modal also shows/hides. Makes it easy to integrate into existing state.
2. Modal using anchor link
The anchor link modals work by adding a "#" ID to the URL which shows the corresponding modal if it matches. Daisy achieves this with the :target selector. The "open modal" anchor sets the path, that div#my-modal-2 reacts.
These are cool because the modal state is kept in the URL, so if you open a modal, then send that link to someone, the modal will be open for them too unlike the checkbox modals that are based on state from memory.
Looks like -> abc . com /# my-modal
3. Modal that closes when clicked outside
To achieve click out, Daisy suggests that we essentially take the structure from the first example except make the modal background an additional label for the checkbox. Uses the same CSS under the hood as the first example.
4. URL state + Click out: All of the benefits in one Svelte component
Manage your modal state like a JS variable with the benefits of URL persistent state. Here's a little wrapper I made to make what I think is the perfect modal.
🛠️ Code here ⬇️
gist.github.com/qudo-code/91a1703f9a67d026bdc2e51cd13314de
Use it like this
I think I'll stop here because now the next step would be to make some modal system for managing modals across your project. You're not going to want to have a bunch of buried boolean toggles.
You'll probably want to add all of your modals top level and register them with a store or something.
Another thing I have yet to try but want to is use XState to manage modals. You could do these "#" URL modifications upon the entry/exit functions of states.
XState is fun, I once worked on a project where we used it to define the entire UI. Svelte components were bound to particular states and they were rendered/destroyed as you enter/exit states. That can be for another day too lol
github.com/qudo-code/state-machine-snacks
Thanks for reading, back to building for Grizzly 🐻🤓