我正在使用react-modal
文档中提到默认情况下,当单击遮罩时模态框应该关闭。即使我将shouldCloseOnOverlayClick
属性设置为true,这仍然不起作用。
我不知道是否有任何可能阻止该事件发生的东西。
如果这与任何相关/指示性内容有关(我还没有弄清楚为什么会显示这个),我注意到在Chrome开发者工具中,我的模态框的覆盖和内容节点都有一个未定义的类。我使用的所有CSS类都已定义并且按照预期工作。
以下是相关的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类:
.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;
}