Modal Dialog

Author
Ex-Meta Staff Engineer
Languages

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:
    1. Title/heading string.
    2. Any contents as the body.
    3. 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

Premium FeaturePurchase premium to see companies which ask this question.
View plans
The TypeScript Denial Tee — TypeScript love, "any" denialSponsor: SwagOverflow
The TypeScript Denial Tee — TypeScript love, "any" denial

You 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.

Get yours now ->

The TypeScript Denial Tee — TypeScript love, "any" denialSponsor: SwagOverflow
The TypeScript Denial Tee — TypeScript love, "any" denial

You 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.

Get yours now ->