How to display a modal inside a parent container

Question

I have a small sub-window like div in my app, and I need to display a modal inside the sub-window instead of the whole viewport.

So the backdrop of the modal should only cover the sub-window and not the entire screen

I am using material-ui, so any solution native to material-ui is preferred.

Answer 1

Add disablePortal prop to <Dialog> and add styles as given in the code snippet

For some reason the styles applied to root didn't work through classes or className so had to add the style prop

import { makeStyles, DialogContent, Dialog } from '@material-ui/core';
import React from 'react';

const useStyles = makeStyles({
  root: {
    position: 'absolute',
  },
  backdrop: {
    position: 'absolute',
  },
});

interface ISubWindow {
  onClose: () => void;
  open: boolean;
}

const SubWindow: React.FC<ISubWindow> = ({onClose, open}) => {
  const classes = useStyles();

  return (
    <Dialog
      disablePortal
      onClose={onClose}
      open={open}
      fullWidth
      className={classes.root}
      classes={{
        root: classes.root,
      }}
      BackdropProps={{
        classes: { root: classes.backdrop },
      }}
      style={{ position: 'absolute' }}
    >
      <DialogContent />
    </Dialog>
  );
};

export default SubWindow;