模式窗口被截断

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    overflow: auto; /* 允许内容滚动 */
}

@media (max-width: 600px) {
    .modal {
        width: 90%;
    }
}

.modal-content {
    padding: 20px;
    box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

function showModal() {
    const modal = document.getElementById('myModal');
    modal.style.display = 'block';
    // 调整窗口位置以确保居中
    const modalRect = modal.getBoundingClientRect();
    if (modalRect.bottom > window.innerHeight) {
        modal.style.top = `${window.innerHeight - modalRect.height - 10}px`;
    }
}

import ReactModal from 'react-modal';

function App() {
    return (
        <ReactModal
            isOpen={true}
            onRequestClose={() => {}}
            style={{
                content: {
                    top: '50%',
                    left: '50%',
                    right: 'auto',
                    bottom: 'auto',
                    marginRight: '-50%',
                    transform: 'translate(-50%, -50%)'
                }
            }}
        >
            <div>这是一个模态窗口</div>
        </ReactModal>
    );
}