时间戳

首页 > 解决方案 > 如何使反应模态的背景成为固体

javascript - 如何使反应模态的背景成为固体

问题描述

因此，我刚刚通过单击按钮将 react-Modal 中的模态添加到页面，我面临的问题是，当我单击该按钮使模态弹出时，它确实可以，但是模态覆盖的页面内容会渗透，所以模态看起来像这样。 在此处输入图像描述

桌子等不应该在那里，只有一个空白的白色屏幕。任何人都可以帮助我吗？

下面是我单击以显示模态的第一堂课。

const [showModal, setShowModal] = useState(false)
<button onClick={() => { setShowModal(true) }} className="paddingNextButton float-right viewButtonHover btn btn-md btn-outline-secondary"> Next</button>
<ModalForm isModalOpen={showModal} closeModal={() => { setShowModal(false) }} />

下面是模态本身的另一类。

import React from 'react'
import Modal from 'react-modal'
import { Overlay } from 'react-bootstrap'

Modal.setAppElement('#root')
function ModalForm({ isModalOpen, closeModal }) {
    return (
        <div>
            <Modal isOpen={isModalOpen} onRequestClose={closeModal}
                style={
                    {
                        overlay: {
                            backgroundColor: "grey"
                        },
                        content: {
                            color: "red"
                        }

                    }
                }
            >
                <h1>Title</h1>
                <p></p>
            </Modal>
        </div>
    )
}

export default ModalForm

标签： javascriptreactjsreact-modal

解决方案

啊，我现在看到了问题。你没有 aModal.Body或 a Modal.Header。你需要的应该是这样的：

<Modal isOpen={isModalOpen} onRequestClose={closeModal} style={{...}}>
    <Modal.Header closeButton>
        <Modal.Title>
            Title
        </Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <p>Modal body goes here</p>
    </Modal.Body>
</Modal>

推荐阅读