有没有一种方法可以打开一个模式,就像在 youtube 视频中一样,当您点击全屏时它会占据整个屏幕 View 。
现在这就是我到目前为止所取得的成就
<Modal
title={false}
visible={visible}
footer={false}
centered
width="100vw"
onCancel={() => setVisible(false)}
>
<div style={{height: '100vh'}}>
some content
</div>
</Modal>
这就是它的样子
我希望它看起来像这样
最佳答案
使用纯 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>
);
};
关于javascript - 全屏打开模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73119164/