视口中的中心弹出框

Question

我应该如何在视口中将 React Material-UI 弹出框居中？

我的应用程序基于 Next.js 框架构建，该框架基于 React 构建。 （我在下面的 package.json 中包含了完整的依赖项。）

我有一个元素在点击时会打开一个弹出框：

        <Popover
            id="video-popover"
            open={Boolean(video)}
            onClose={this.handleClose}
            anchorOrigin={{
                vertical: 'center',
                horizontal: 'center'
            }}
            transformOrigin={{
                vertical: 'center',
                horizontal: 'center'
            }}
        >
            <video controls autoPlay src={`/static/${video}`}>
                Your browser does not support the
                    <code>video</code> element.
                </video>
        </Popover>

我想让视频在视图中居中。

通常我会设置 Popover 元素的 anchorEl 属性，并且 Popover 会以该锚元素为中心。但是，我应该使用什么元素在视口中居中？

---

如果不是很明显，onClick 处理程序只是将 state.video 设置为要播放的视频的文件名。 onClose 处理程序将 state.video 设置为 null。如果您需要我上传更多 JSX 代码，请告诉我，但我很确定这与 Popover 在视口上的居中无关。

这是我的依赖项：

  "dependencies": {
    "@material-ui/core": "^3.6.2",
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-icons": "^3.2.2"
  },

Answer 1

还有另一种方法：

Popove 已经有一个Div 元素，fixed 位置包含弹出内容，所以我们可以给它样式，并将anchorReference 设置为none。

import React from 'react';
import {
  makeStyles,
  Popover,
} from '@material-ui/core';

const useStyles = makeStyles (theme => ({
  popoverRoot: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
}));

const CenteredPopOver = ({open}) => {
  const classes = useStyles();

  return (
    <Popover
      open
      anchorReference={"none"}
      classes={{
        root: classes.popoverRoot,
       }}
    >
      // what ever should be in the popover
      <div>I am in the center</div>
    </Popover>
  )
}

Answer 2

您可以在其后面制作一个全屏弹出层，就像模态通常具有的那样。制作一个固定位置的 div，宽度为 100vw，高度为 100vh。然后将其用作您的锚元素。您必须根据需要隐藏和显示它。