dialog questions
Hey, I have a couple questions regarding the
dialogue element-
1) mdn recommends to avoid toggling the open attribute to enable the dialogue and to instead use .show() or .showModal() in js. Why is this?
2) I’ve seen that .show() makes the dialogue “non modal” and .showModal() makes the dialogue “modal”. What’s the key differences?
3) mdn also says it’s recommended to use the autofocus attribute on important content or the close button in the dialogue. I haven’t seen this attribute until now, is it a dialogue only thing or can you use it with other things?
I’d appreciate any help, thanks in advance.6 Replies
1- the "open" attribute is used for the initial state of the dialog
it just so happens that the browser doesnt stop you from opening it by adding the attribute
2- a modal shouldnt let you interact with the page, and adds the
::backdrop element
3- can be used anywhere. its super useful for login forms, where you can autofocus the first inputah okay I see, and does the autofocus run on page load normally? (on dialog pop up of course in this case)
yes
"runs"
Keep in mind that MDN has pages for attributes too: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
MDN Web Docs
autofocus - HTML: HyperText Markup Language | MDN
The autofocus global attribute is a Boolean attribute indicating that an element should be focused on page load, or when the that it is part of is displayed.
Ah okay. I didn’t catch that mdn had a page for that, thanks
And thanks epic for the info
you're welcome
mdn has tons of pages, one for almost each attribute