如何在父容器中显示模式

Question

我的应用程序中有一个像 div 这样的小子 window，我需要在子 window 而不是整个视口中显示模式。

所以模式的背景应该只覆盖子window而不是整个屏幕

我正在使用 material-ui，因此首选 material-ui 的任何解决方案。

Answer 1

将 disablePortal 道具添加到 <Dialog> 并添加代码片段中给出的样式

由于某些原因，应用于 root 的样式无法通过 classes 或 className 工作，因此必须添加 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 的例子让我了解了大部分内容，但直到我将它与@Scott Sword 和@Gretchen F. 对类似问题的回答结合起来后，它才发挥作用。

最重要的部分是将父 div 的 position 属性设置为 relative，尽管我也稍微不同地传入了 props，这样工作起来更容易一些对我来说：

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>

如何在父容器中显示模式

How to display a modal inside a parent container

modal-dialog

reactjs

material-design

material-ui