在 React 中滚动模态窗口

Question

我在 React 中创建了一个组件，用作模式窗口，单击按钮时会打开该窗口，但我不知道如何使其在打开时滚动，而不是主窗口。

import close from '/close.png'; 
import add from '/add1.png'; 
import './Modal.css';  
import MainButton2 from '../Button/MainButton2'

import { useState, useRef } from "react";
export default function  Modal ({ isOpen, onClose }, props) {
    if (!isOpen) return null;
    return (
        <div className="modal-overlay">
    
            <div className="modal-content">
               <div className='thefirstrow'>
                <div className='newpod'>jasjssj</div> 
                <img className='close' src={close} alt='user'   style={{ cursor: 'pointer'  }}  onClick={onClose}/>
                </div>
             
            </div>
        </div>
    );
};

模态.css

.modal-overlay {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); 
  display: flex;
  justify-content: center;
  z-index: 2000;

}

.modal-content {
  position: absolute; 
  background: white;
  border-radius: 40px;
  width: 64vw;
  height: 630px;
  z-index: 1001;
  margin-top: 100px; 
  transform: translateY(-50%); 
}

这就是它在主窗口中打开的方式：

 <Modal isOpen={isModalOpenPodcast} onClose={() => setIsModalOpenPodcast(false)} />

Answer 1

如果您尝试使模式中的内容可滚动，只需将“overflow:scroll”添加到您的“.modal-content”样式类中即可。

.modal-content {
  position: absolute;
  background: white;
  border-radius: 40px;
  width: 64vw;
  height: 630px;
  z-index: 1001;
  margin-top: 100px;
  transform: translateY(-50%);
  overflow: scroll;
}

并使您的内容足够大，以便您可以滚动。

.newpod {
  height: 2000px;
}