How to display a modal inside a parent container - reactjs

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;

Answer 2

#Rahul's example got me most of the way, but it didn't quite work until I combined it with #Scott Sword and #Gretchen F. 's answers from this similar question.
The most important part was setting the position property of the parent div to relative though I also passed in props slightly differently which has worked a little easier for me:
import { makeStyles, DialogContent, Dialog } from '#material-ui/core';
import React from 'react';
const useStyles = makeStyles({
root: {
height: 'max-content',
minHeight: '100%',
},
backdrop: {
position: 'absolute',
},
paperScrollPaper: {
overflow: 'visible',
}
});
interface ISubWindow {
onClose: () => void;
open: boolean;
}
const SubWindow: React.FC<ISubWindow> = ({onClose, open}) => {
const classes = useStyles();
return (
<Dialog
disableAutoFocus//disables rescrolling the window when the dialog is opened
disableEnforceFocus//allows user to interact outside the dialog
disableScrollLock//prevents the div from shrinking to make room for a scrollbar
disablePortal
onClose={onClose}
open={open}
fullWidth
className={classes.root}
classes={{
paperScrollPaper: classes.paperScrollPaper
}}
BackdropProps={{
classes: { root: classes.backdrop },
}}
style={{ position: 'absolute' }}
>
<DialogContent />
</Dialog>
);
};
export default SubWindow;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>