Question

我应如何在视口中居中放置React Material-UI Popover？

我的应用程序基于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

还有另一种方法：

Popove已经具有一个for位置的for元素，其中包含弹出内容，因此我们可以为其指定样式，并将Div设置为fixed。

anchorReference

Answer 2

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

视口中的中心弹出窗口

2 个答案: