react模态框周围不可点击且透明

在 React 中实现模态框周围不可点击且透明，可以使用 CSS 来实现。具体实现方式如下：

1. 为模态框容器添加一个背景层，设置其为半透明并占据整个页面，这样可以实现模态框周围透明的效果。

2. 为背景层添加一个事件处理器，阻止鼠标事件冒泡，这样点击背景层时事件不会传递到下层的元素。

下面是一个示例代码：

import React, { useState } from 'react';
import Modal from 'react-modal';
import './Modal.css';

Modal.setAppElement('#root');

function Example() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  function openModal() {
    setModalIsOpen(true);
  }

  function closeModal() {
    setModalIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <<div className={`modal-overlay ${modalIsOpen ? 'show' : ''}`} onClick={closeModal}></div>
      <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
        <h2>Modal Title</h2>
        <p>Modal Body</p>
        <button onClick={closeModal}>Close Modal</button>
      </Modal>
    </div>
  );
}

在上面的代码中，我们在模态框外层添加了一个 `div` 元素作为背景层，并为其添加了 `modal-overlay` 的 CSS 类。在 CSS 中，我们可以为该类设置以下样式：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal-overlay.show {
  visibility: visible;
  opacity: 1;
}

.modal-overlay:hover {
  cursor: pointer;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

在上面的 CSS 样式中，我们使用了 `visibility` 和 `opacity` 属性来实现背景层的显示和隐藏，使用了 `transition` 属性来实现渐变效果，使用了 `:hover` 伪类来设置鼠标指针的样式。同时，我们也为模态框容器添加了一些基本的样式。