Use Modal to create an a11y-friendly modal dialog.

Note: ModalDemo is a simple class for demonstration that maintains an isOpen variable in its state.

      header={<Heading.h1>Modal Title</Heading.h1>}
      width={["200px", "300px"]}
      ariaLabel='Aria label'
        <Text>Modal Content</Text>


isOpenbooleanControls display status of modal
onClosefunctionExecuted when modal is closed
bgstringColor of dialog background
zIndexnumberz-index of dialog
imgModebooleanAdd padding to the modal dialog when true
widthArrayOf.stringWidth of the modal at Design System's responsive breakpoints
disableCloseButtonArrayOf.stringThere will be a floating close button. When enabledOverflow = true, it's there by default.
enableOverflowbooleanWhen enabled, the modal will extend over the screen based on content, otherwise it will follow height
heightArrayOf.stringResponsive height, when enableOverflow={true}, it's not in use
fullScreenbooleanDialog content should fill entire screen. Not for use with enableOverflow.
ariaLabelstringaria-label for the DialogContent child component. Required if ariaLabelledBy is not defined
ariaLabelledBystringaria-labelledby for the DialogContent child component. Required if ariaLabel is not defined

Prevent Background Scrolling

Use the ScrollLock helper to prevent the background content from scrolling when the modal is open.