Enjoy 20% off all plans by following us on social media. Check out other promotions!

Modal Dialog

作者
Ex-Meta Staff Engineer
语言
HTMLJSCSS

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.

公司

高级版功能购买高级版以查看出题公司。
查看计划
View solution