单击叠加层时反应模态不关闭

Question

文档中提到，默认情况下，当您单击叠加层时，模式应该关闭。即使我将 shouldCloseOnOverlayClick 属性设置为 true，这仍然不起作用。

我不知道有什么可能会阻止该事件发生。

万一这是 relevant/indicative 的任何东西（而且我还没有弄清楚为什么会这样显示），我在 Chrome 开发人员工具中注意到我的模态的叠加层和内容节点都有一个未定义 class。我使用的所有 CSS classes 都已定义并正常工作。

这是相关的 JSX 和 CSS，如果需要更多上下文，请告诉我。

JSX:

return (
    <div className="Modal">
        <Modal
            className={{
                base: 'Modal-content' + ' Modal-InputError-videoURL'
            }}
            overlayClassName={{
                base: 'Modal-overlay'
            }}
            isOpen={true}
            contentLabel="Modal"
        >
            {props.message}
            <br />
            <br />
            <br />
            <button
                className="Modal-button"
                onClick={events.handleCloseModal}
            >
                Close
            </button>
        </Modal>
    </div>
)

CSS classes:

.Modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
}

.Modal-content {
    display: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #ccc;
    background: rgb(38,38,38);
    border: 1.5px solid rgb(45,45,45);
    overflow: auto;
    border-radius: 1px;
    outline: none;
    z-index: 9999;
    width: 400px;
    margin-left: -150px;
    margin-right: -150px;
    padding: 24px;
    line-height: 16px;
}

.Modal-InputError-videoURL {
    height: 134px;
    margin-bottom: -67px;
    margin-top: -67px;
}

.Modal-button {
    display: inline-block;
    padding: 4px;
    margin: 0;
}

Answer 1

isOpen 属性静态设置为 true。您应该通过将 isOpen 值保持在您的状态来控制它的值。

isOpen = {this.state.isModelOpen}

并且在 handleCloseModal 方法中，您可以将其值设置为 false。

this.setState({isModelOpen: false})

Answer 2

我使用 onRequestClose（根据文档）解决了这个问题。 react-modal 似乎没有在其本地状态中存储 isOpen，所以我提供了一个回调 onRequestClose 来更新父组件中的 state，随后传递向下到模态作为道具。

http://reactcommunity.org/react-modal/examples/on_request_close.html

Answer 3

我尝试在某个组件中使用模态，但点击叠加层关闭不起作用。然后，我将模态移动到之前的父组件，它开始工作了。

我猜这与 z-index 有关，但我不确定。抱歉缺少详细信息。

希望对大家有所帮助！

单击叠加层时反应模态不关闭

react-modal not closing when clicking the overlay

modal-dialog

reactjs

react-modal