Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Steven Parker
231,275 PointsMore fun with <dialog>
Not a question, but sharing a discovery.
After taking the HTML Dialog workshop, I took a look at the MDN page and discovered that while a dialog element is open in modal mode, a CSS pseudo-element named "backdrop" is available to style the page area underneath the dialog box. This can be used for things like fading the page even more than the default as a clear indication that the controls on it are temporarily disabled.
Example:
dialog::backdrop {
background-color: rgba(60,60,60,.8);
}
Also, while the support is still less than ideal, MDN seems to have removed their "expermental" designation from this element. I'd still be hesitant to use it on a live site, but I'm looking forward to when it's more fully supported.
2 Answers
Mister Moody
48,333 PointsJust watched @nickpettit tutorial on the dialog element and look forward to researching further on case usage and styles. I appreciate how the `form element is implemented and I learned from MDN how to use the menu element to contain the buttons.
Good stuff!
john Shi
1,791 PointsIt's a pretty late introduction to the HTML standard, I am surprised it took this long.
You may well be able to check the version of the browser before executing, falling back to something purely JS, just to be sure.
Steven Parker
231,275 PointsI generally would just not use a CSS feature that wasn't fully supported in all common browsers.
Now, four years later, according to MDN the ::backdrop pseudo-element is itself supported in all browsers, but for some reason it still doesn't work on dialog elements in Firefox.
furkan
11,733 Pointsfurkan
11,733 PointsI still have not used to dialog element but once I have the time I will for sure go over it. I am very glad they have created an element for popping up modals, comes very handy for creating forms, giving daily notices, or new page visits, or even a login pop up for members. Really does look like a new exciting feature! Cannot wait to to learn about it ?