我一直在尝试在系统中实现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>
);
}
按预期,我希望在模态窗口外单击时关闭模态。当前,即使单击模式窗口也将关闭。
答案 0 :(得分:1)
<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”类。
而且如果您的点击点上没有“覆盖容器”,则模式关闭。
答案 1 :(得分:1)
设法做到这一点
onClickOutside(e){
if (e.target.classList.contains('Overlay-content') || e.target.classList.contains('Overlay-container')) {
this.setState({
hidden: true
})
}
}
<div
className={"Overlay " + (this.state.hidden? "hidden": "show")}
id={this.props.id + "-container"}>
<div className={contentClassName} onClick={(e)=>{
this.onClickOutside(e);
}}>
<div className={"Overlay-container"} style={contentStyle}>
<a id={this.props.id + '-closeButton'}
className="Overlay-closeBtn icon-close-zoom" onClick={(e) => {
this.onClickHide(e)
}}/>
{this.props.children}
</div>
</div>
</div>
谢谢!