视口中的中心弹出框

Posted 2023-02-22

【中文标题】视口中的中心弹出框

【英文标题】：Center Popover in Viewport

【发布时间】：2019-05-18 11:46:01

【问题描述】：

我应该如何在视口中将 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"
  ,

【参考方案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>
  )

【参考方案2】：

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

【讨论】：

这听起来像是正确的解决方案。我正在学习React.createRef() 并将视频播放器提升到顶部组件。 （别笑。）您的解决方案听起来更干净、更模块化。我以前没有使用固定的 pos div 来显示 Popover。您有可以推荐的链接或示例代码吗？

webdevdani 之前的评论是给你的，但我无法让它工作。希望这个坚持...

出于某种原因，Popover 不会以 100vh div 为中心。不知道为什么不。最后，我只是使用了一个 Modal。