代码之家 › 专栏 › 技术社区 › Mark Moore

在视口中居中弹出窗口

next.js material-ui reactjs

Mark Moore · 技术社区 · 7 年前

如何在视口中居中放置React材质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将位于锚元素的中心。但是,我应该使用什么元素在视口中居中?

  "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 回复 | 直到 7 年前

karianpour 6 年前

还有另一种方法:

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>
  )
}

webdevdani 7 年前

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前