0
182
ViewsAbrir Modal en pantalla completa
¿Hay alguna manera de abrir un modal que ocupe toda la pantalla como en el video de YouTube? Cuando hace clic en su pantalla completa, toma la vista de pantalla completa.
En este momento esto es lo que he logrado hasta ahora
<Modal title={false} visible={visible} footer={false} centered width="100vw" onCancel={() => setVisible(false)} > <div style={{height: '100vh'}}> some content </div> </Modal>y así es como se ve
quiero que se vea así
3 answers
Answer question0
Con JavaScript puro puedes hacer algo como
const modal = document.querySelector('#myModalsClass') modal.requestFullscreen()Si busca los documentos de la API de pantalla completa, encontrará otra información útil sobre cómo trabajar con esto.
Si está usando React, necesita usar una referencia para acceder a la API de dom
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> ); };0
id recomiendo usar mui modal de pantalla completa Aquí el enlace https://mui.com/material-ui/react-dialog/ avíseme si necesita ayuda
0
Revisa el siguiente ejemplo
Nota: configure footer={null} si desea ocultar los botones Aceptar y CANCELAR
Aplicación.js
import React, { useState } from 'react'; import 'antd/dist/antd.css'; import './index.css'; import { Button, Modal } from 'antd'; const App = () => { const [visible, setVisible] = useState(false); return ( <> <Button type="primary" onClick={() => setVisible(true)}> Open Full screen Modal </Button> <Modal title="Full screen modal" visible={visible} //onOk={() => setVisible(false)} onCancel={() => setVisible(false)} footer={null} //If you want to hide OK and cancel buttons > <p>Full screen...</p> <p>Full screen...</p> <p>Full screen...</p> <p>Full screen...</p> <p>Full screen...</p> </Modal> </> ); }; export default App;índice.css
.ant-modal, .ant-modal-content { height: 100vh; width: 100vw; top: 0; margin: 0; }Captura de pantalla
Manifestación
