import ReactModal from 'react-modal'; import './styles.css'; function MyModal() { return ( <ReactModal isOpen={true} overlayClassName="transparent-overlay" > {/* 模态框内容 */} </ReactModal> ); } .transparent-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } 缩小这个模态框的大小，且周围任然不可被点击

为了缩小模态框的大小并且保持周围不可被点击，你可以在ReactModal组件中设置contentClassName属性，并在CSS中设置该类的样式，如下所示：

import ReactModal from 'react-modal';
import './styles.css';

function MyModal() {
  return (
    <ReactModal
      isOpen={true}
      overlayClassName="transparent-overlay"
      contentClassName="custom-modal"
    >
      {/* 模态框内容 */}
    </ReactModal>
  );
}

.transparent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.custom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: white;
  z-index: 1000;
}

在上面的代码中，我们添加了`contentClassName="custom-modal"`属性，并在CSS中设置`.custom-modal`的样式，使得模态框在页面中垂直和水平居中，且宽度和高度都是50%。同时，我们还将模态框的z-index设置为1000，以确保它始终在遮罩层之上。