javascript - 全屏打开模式

Question

有没有一种方法可以打开一个模式，就像在 youtube 视频中一样，当您点击全屏时它会占据整个屏幕 View 。

现在这就是我到目前为止所取得的成就

<Modal
      title={false}
      visible={visible}
      footer={false}
      centered
      width="100vw"
      onCancel={() => setVisible(false)}
    >
      <div style={{height: '100vh'}}>
        some content
      </div>
    </Modal>

这就是它的样子

我希望它看起来像这样

Answer 1

使用纯 JavaScript，你可以做类似的事情

const modal = document.querySelector('#myModalsClass')
modal.requestFullscreen()

如果您查找全屏 API 的文档，您会发现有关如何使用它的其他有用信息。

如果您使用的是 React，则需要使用 ref 来访问 dom api

import React, { useRef } from "react";

const MyComponent = (props) => {
  const myFullscreenComponent = useRef();
  const openContentFullscreen = () => {
    const element = myFullscreenComponent.current;
    if (element && element.requestFullscreen) {
      element.requestFullscreen();
    }
  };
  return (
    <div>
      <button onClick={openContentFullscreen}>Full Screen</button>
      <div className="modal" ref={myFullscreenComponent}>
        content I want to be fullscreen
      </div>
    </div>
  );
};