2. Discover the native Dialog element

Requirements

• Create a button which opens a modal
• Create a dial using the native dialog element
• Loosely follow the visual appearance provided below
• Add slightly opaque backdrop
• ⭐ Make the ESC key close the dialog

Design preview

Resources

• Close icon

Learn more

• Dialg MDN
• Dialog
• HTML dialog element article

Discussion topics

• Using semantic HTML element for dividers versus of using CSS styles
• Best way to transition CSS properties
• ”*” selector versus CSS cascade and inheritance
• Using header and footer for UI blocks
• Click on non-clickable elements like img
• Accessibility and power user benefits of native elements and attributes