如何在父容器内显示模态答案

【问题标题】：How to display a modal inside a parent container如何在父容器内显示模态
【发布时间】：2019-12-13 07:12:09
【问题描述】：

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

所以模态框的背景应该只覆盖子窗口而不是整个屏幕

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

【问题讨论】：

您想分享它的工作原理吗？到目前为止，您取得了什么成就？
我认为您还需要混合样式，而不仅仅是 js 问题。 div必须在其父窗口中设置为“包含”而不是完整窗口。
如果你想实现这一点，你将需要使用 CSS。我不认为 material-ui 提供了添加父组件来显示模态的方法。

标签： reactjs modal-dialog material-design material-ui

【解决方案1】：

将 disablePortal 属性添加到 <Dialog> 并添加代码 sn-p 中给出的样式

由于某种原因，应用于 root 的样式无法通过 classes 或 className 工作，因此必须添加 style 属性

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;

【讨论】：

【解决方案2】：

@Rahul 的示例让我了解了大部分情况，但直到我将它与@Scott Sword 和@Gretchen F. 的this 类似问题的答案结合起来，它并没有完全奏效。

最重要的部分是将父 div 的 position 属性设置为 relative 虽然我也传递了一些稍微不同的道具，这对我来说更容易一些：

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>

【讨论】：