如何在 reactjs 中使模态可滚动

Question

我正在开发一个电子商务应用程序，我正在使用模式进行注册和登录。

表格很长，溢出页面

我希望模态能够像 bootstrap 模态一样滚动。

如何使其可滚动？

模态组件

const MODAL_STYLES = {
    position: "fixed",
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    backgroundColor: '#FFF',
    padding: '30px',
    zIndex: '1000',
    width: '50%',
    borderRadius: '.5em'
}
const OVERLAY_STYLE={
    position: "fixed",
    top: '0px',
    left: '0px',
    bottom: '0px',
    right: '0px',
    backgroundColor: 'rgba(0,0,0, .8)',
    
    zIndex: '1000'
}

登录页面

import React, {useState} from 'react'
import Modal from '../Components/Modal';
const Modal = ({open, children}) => {
    if(!open) return null
    return ReactDom.createPortal(
        <>
        <div style={OVERLAY_STYLE}>
            <div style={MODAL_STYLES}>
                {children}
            </div> 
        </div>
        </>,
        document.getElementById('portal')
    )
}
const [openLoginModal, setOpenLoginModal] = useState(false)
 {
            openLoginModal && (
                <Modal open={openLoginModal}>
                    <form action="">
                    <div className="form-group mb-2">
                        <label htmlFor="" className="mb-2">Full Name <span>*</span></label>
                        <input type="text" className="form-control" />
                    </div>
                    <div className="form-group mb-2">
                        <label htmlFor="" className="mb-2">Emil Address <span>*</span></label>
                        <input type="text" className="form-control" />
                    </div>
                    <button></button>
                    </form>
                </Modal>
            )
        }

link 到 codesandbox

https://codesandbox.io/s/muddy-voice-lf0ft

Answer 1

你应该像下面一样改变你的风格：

const MODAL_STYLES = {
  position: "absolute",
  backgroundColor: "#FFF",
  padding: "15px",
  zIndex: "1000",
  width: "35%",
  borderRadius: ".5em"
};

const OVERLAY_STYLE = {
  position: "fixed",
  display: "flex",
  justifyContent: "center",
  top: "0",
  left: "0",
  width: "100%",
  height: "100%",
  backgroundColor: "rgba(0,0,0, .8)",
  zIndex: "1000",
  overflowY: "auto"
};

代码如下：https://codesandbox.io/s/quirky-almeida-dik6v

如何在 reactjs 中使模态可滚动

How do I make modal scrollable in reactjs

modal-dialog

bootstrap-modal

reactjs