视口中的中心弹出框

Question

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

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

我有一个在单击时打开 Popover 的元素：

        <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

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

Answer 2

还有另一种方法：

Popove 已经有一个 Div 位置 fixed 的元素包含了 popover 内容，所以我们可以直接给它样式，并将 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>
  )
}

视口中的中心弹出框

Center Popover in Viewport

reactjs

material-ui

next.js