3 ms·
an example of this is used for modals in daisyui -> https://daisyui.com/components/modal/# https://daisyui.com/components/modal/# the relevant style applied lo
by aloer 4y ago
an example of this is used for modals in daisyui -> https://daisyui.com/components/modal/# https://daisyui.com/components/modal/#
the relevant style applied looks like this:
.modal-open, .modal:target, .modal-toggle:checked+.modal {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
- extra88 4y agoUnfortunately, that lacks any of the semantics or properties a modal dialog should have, like role="dialog", managing focus when the dialog opens or closes, or making the page contents behind the modal inert (if the contents behind a modal aren't inert, it's not a modal).
- arcanemachiner 4y agoYou can also trigger the behaviour of Daisy components with CSS classes (and a sprinkle of JS). But yeah, their whole "CSS + :checked elements only" model really makes my brain hurt sometimes (e.g. the [Drawer](https://daisyui.com/components/drawer/ https://daisyui.com/components/drawer/) component... nothing is where it belongs).