CODEWITHSUNDEEP
reactjsmodal-dialogmaterial-designmaterial-ui
Rahul Yadav
Rahul Yadav

Reputation: 3197

How to display a modal inside a parent container

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.

Upvotes: 4

Views: 6110

Answers (2)

Jason Masters
Jason Masters

Reputation: 309

@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>

Upvotes: 2

Rahul Yadav
Rahul Yadav

Reputation: 3197

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;

Upvotes: 5

Related Questions