我一直在尝试在我的系统中实现 onclick 模式关闭。我已经使用关闭按钮实现了模态 onclick 事件,但在模态外部单击时尚未成功完成
我已经尝试在 div 上添加 onclick 侦听器,但即使在模式窗口内单击,内容也会关闭。
<div
className={"Overlay " + (this.state.hidden? "hidden": "show")}
id={this.props.id + "-container"} onClick={() => {
this.setState({ hidden: true })
}}>
这是到目前为止我的模式框渲染代码
render() {
const contentClassName = this.getContentClassName();
if (this.props.show) {
document.body.style.overflow = 'hidden';
}
const contentStyle = {
width: this.props.width,
height: this.props.height,
position: "relative"
};
return (
<div
className={"Overlay " + (this.state.hidden? "hidden": "show")}
id={this.props.id + "-container"} onClick={() => {
this.setState({ hidden: true })
}}>
<div className={contentClassName}>
<div className={"Overlay-container"} style={contentStyle}>
<a id={this.props.id + '-closeButton'}
className="Overlay-closeBtn icon-close-zoom" onClick={() => {
this.setState({ hidden: true })
}}/>
{this.props.children}
</div>
</div>
</div>
);
}
正如预期的那样,我希望在单击模态窗口外部时关闭模态。目前,即使单击模式窗口后它也会关闭。
<script>
$('html').click(function(e) {
if(!$(e.target).hasClass("Overlay-container")) {
document.getElementById('Overlay-container').style.display = "none"
}
});
</script>
你的代码在点击时切换状态显示或隐藏(当然你不能点击关闭状态)
当您的点击没有名为“Overlay-container”的类元素时,此功能有效
//添加描述
当您单击“html”时,“if”会检查您单击的位置并具有“Overlay-container”类。
如果您的点击点上没有“覆盖容器”,则模式关闭。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)