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.