Overlay content method

Hey, given an example like so, where there’s content overlaying the site, would this typically be done with dialogue or a a div with z-index and a controlled display etc? I’m not sure if dialogue is meant for heavy content or not. Thanks in advance.
No description
13 Replies
croganm
croganm3w ago
I actually did that exact project! Pretty sure I used a div only because I'm unfamiliar with dialogue 😂
ἔρως
ἔρως3w ago
i would use a dialog it's just a div that you shouldnt change the display type of, and looks ugly af and has an overlay background built-in
snxxwyy
snxxwyyOP3w ago
Oh nice! Yeah I’m sure the div method is pretty good too When you say ‘looks ugly’, does that mean you can’t change the way it looks or shouldn’t?
ἔρως
ἔρως3w ago
you can, but the default styles are HORRIBLE
snxxwyy
snxxwyyOP3w ago
Cool, is there anything you shouldn’t change other than the display? Yeah I just checked, they aren’t great haha
ἔρως
ἔρως3w ago
nope, just use .showModal() and it will be fine yeah, "not great" is an understatement
snxxwyy
snxxwyyOP3w ago
It seems very complex with this top layer looking stuff Would be cool if we could add stuff to that
ἔρως
ἔρως3w ago
you can add to the dialog treat it as a fugly body
clevermissfox
clevermissfox2w ago
Make sure when styling the dialog you’re targeting it with the [open] attribute. Ppl often make the mistake of just using
dialog{/* styles*/}
dialog{/* styles*/}
And override the display property on accident. Easy to avoid by using selector dialog[open] Also I’ve noticed that just toggling the open attribute somehow keeps it in the content flow. Using the method to show() or showModal() seems to actually put it into the top layer. And I’ve seen that my close button (or the first focusable input inside the dialog) is already autofocused when using showModal() method
snxxwyy
snxxwyyOP2w ago
ah cool, i appreciate the info
ἔρως
ἔρως2w ago
toggling the attribute is akin to changing the display, from what i saw personally, i absolute hate using [open] i just don't change the display of it, and that's it
clevermissfox
clevermissfox2w ago
If you can avoid declaring any display and use any display:grid for layout on a wrapper that's the dialogs direct child , that's great but I like to guve ppl a heads up as its a mistake i immediately made when it first dropped and a mistake i often see others make. Im trying to get more comfortable with using an extra wrapper on elements because of container queries but I had a real aversion to extra/non-essential divs. But with this wordpress website I'm trying to fix, you wouldn't believe the level of wrappers I have to wade through to find the actual element its wild. Seeing this makes me not feel so bad about one level deep if it makes things easier. Also in one of kpows recent videos , he used a Dialog element for semantics with a popover attribute for functionality and it blew my mind 🤯 I had always thought of them as either/or Do you mean you hate using the selector dialog[open]? Or to toggle the attribute for visibility?
ἔρως
ἔρως2w ago
i hate using the attribute i just add a wrapper in it by the way, if the wrapper is a form, you can add method="dialog" and it automatically closes the dialog
Want results from more Discord servers?
Add your server