如何在父容器内显示模态框

Question

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

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

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

Answer 1

添加disablePortalprop<Dialog>并添加样式，如代码片段中所示

由于某种原因，应用于 root 的样式无法正常工作classes，className因此必须添加styleprop

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;