Центр Popover в Viewport

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>

Я хотел бы получить видеобыть центрированным в представлении.

Обычно я бы установил свойство anchorEl элемента Popover, и 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

Вы можете создать полноэкранный всплывающий слой за ним, как это обычно делают модальные.Сделайте div это фиксированная позиция с шириной 100vw и высотой 100vh.Тогда используйте это как свой якорный элемент.Вам придется прятаться и показывать это по мере необходимости.