react使用documentfullscreenElement全屏后ModalForm弹窗被遮挡

问题描述：

在使用React开发的页面中，当使用document.fullscreenElement全屏时，ModalForm弹窗被遮挡。

问题分析：

在使用document.fullscreenElement全屏时，浏览器会自动将页面的层级提高到最上层，导致ModalForm弹窗被覆盖。

解决方案：

1. 使用z-index属性将ModalForm弹窗的层级提高。

2. 在ModalForm弹窗的外层包裹一个div，并设置该div的z-index属性为较大值。

示例代码：

import React, { useState } from 'react';

const ModalForm = () => {
  const [isFull, setIsFull] = useState(false);

  const handleClick = () => {
    const element = document.documentElement;
    if (!isFull) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      }
      setIsFull(true);
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
      setIsFull(false);
    }
  };

  return (
    <div style={{ zIndex: 9999 }}>
      <button onClick={handleClick}>全屏</button>
      <div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: 'white', zIndex: 10000 }}>
        <h2>Modal Form</h2>
        <p>This is a modal form.</p>
      </div>
    </div>
  );
};

export default ModalForm;

在上面的示例代码中，将ModalForm弹窗的外层包裹了一个div，并将该div的z-index属性设置为9999，使其位于页面的最上层。在ModalForm弹窗内部，将其z-index属性设置为10000，使其位于其它元素之上。这样可以保证ModalForm弹窗在全屏时也能正常显示