reactjs 视口中的居中弹出框

kupeojn6 于 11个月前发布在 React

关注(0)|答案(2)|浏览(79)

我应该如何在视口中将React Material-UI弹出窗口居中？
我的应用基于Next.js框架构建，而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就会在这个anchor元素上居中。但是，我应该使用什么元素来在视口中居中呢？
如果不太明显，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"
  },

型

reactjs

来源：https://stackoverflow.com/questions/53826579/center-popover-in-viewport

2条答案

按热度按时间

e0bqpujr1#

还有另一种方法：
Popove已经有一个fixed位置的Div元素，它包含了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>
  )
}

字符串
而对于MUI v5@JJL有一个很好的解决方案：

<Popover
  open
  anchorReference={"none"}
  sx={{
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  }} >
   // what ever should be in the popover
   <div>I am in the center</div>
</Popover>

型

赞(0）回复(0）举报 11个月前

doinxwow2#

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

赞(0）回复(0）举报 11个月前