Open Modal in fullscreen

user_6761008 0
Viewed 94

Is there a way to open a modal which will take entire screen just like in youtube video when you click on it's fullscreen it takes the entire screen view.

Right now this is what i have achieved so far

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

and this is how it looks like

enter image description here

i want it to look like this

enter image description here

antd reactjs javascript
3 Answers

With pure JavaScript you can do something like

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

If you look up the docs for the fullscreen API you will find other useful information about how to work with this.

If you're using React you need to use a ref to access the 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>
  );
};
user_27726050
user_195272280

Check the following example

Note: set footer={null} if you want to hide OK and CANCEL buttons

App.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;

index.css

.ant-modal,
.ant-modal-content {
  height: 100vh;
  width: 100vw;
  top: 0;
  margin: 0;
}

Screenshot

screenshot

Demo

demo

user_182005800
Related