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>
  );
};

id recommend to use mui full-screen modal Here the link https://mui.com/material-ui/react-dialog/ let me know if you need any help

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

Demo