Modal Dialog
Modal dialogs are interactive overlay windows that temporarily disable the main content of a web page, focusing user attention on specific tasks or information. They serve various purposes, including displaying critical alerts, requesting user input, confirming actions, and presenting additional content without navigating away from the current context.
Build a reusable modal dialog component that can be opened and closed with customizable title and contents.
Requirements
- The modal dialog should contain the following elements:
- Title/heading string.
- Any contents as the body.
- Close button that hides/closes the modal when clicked.
- The modal dialog is centered horizontally and vertically on the screen.
- The modal dialog is displayed above a semi-transparent background overlay.
- The focus of the exercise is on the functionality and not the styling.
Design the necessary props or configuration options for the modal dialog based on the above requirements.
Notes
The <dialog> HTML element is available but for the sake of practice, implement a modal dialog without using that element.
Asked at these companies
Sponsor: SwagOverflowYou swear by TypeScript, but we all know what's lurking in your code. This black tee perfectly captures the silent shame of every front end dev who totally loves strict typing — until any saves the day. Clean, witty, and painfully relatable, it's the ultimate uniform for TypeScript warriors in denial.
Sponsor: SwagOverflowYou swear by TypeScript, but we all know what's lurking in your code. This black tee perfectly captures the silent shame of every front end dev who totally loves strict typing — until any saves the day. Clean, witty, and painfully relatable, it's the ultimate uniform for TypeScript warriors in denial.
Modal Dialog
Modal dialogs are interactive overlay windows that temporarily disable the main content of a web page, focusing user attention on specific tasks or information. They serve various purposes, including displaying critical alerts, requesting user input, confirming actions, and presenting additional content without navigating away from the current context.
Build a reusable modal dialog component that can be opened and closed with customizable title and contents.
Requirements
- The modal dialog should contain the following elements:
- Title/heading string.
- Any contents as the body.
- Close button that hides/closes the modal when clicked.
- The modal dialog is centered horizontally and vertically on the screen.
- The modal dialog is displayed above a semi-transparent background overlay.
- The focus of the exercise is on the functionality and not the styling.
Design the necessary props or configuration options for the modal dialog based on the above requirements.
Notes
The <dialog> HTML element is available but for the sake of practice, implement a modal dialog without using that element.
Asked at these companies
Try these questions next
Sponsor: SwagOverflowYou swear by TypeScript, but we all know what's lurking in your code. This black tee perfectly captures the silent shame of every front end dev who totally loves strict typing — until any saves the day. Clean, witty, and painfully relatable, it's the ultimate uniform for TypeScript warriors in denial.
You must be signed in to view your saved versions
Loading editor
Loading editor
Loading editor
JavaScript Console
console.log() statements will appear here.