在外部点击时实现模态关闭答案

【问题标题】：Implement modal close on click outside在外部点击时实现模态关闭
【发布时间】：2019-05-27 08:07:58
【问题描述】：

我一直在尝试在我的系统中实现 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>
        );
    }

正如预期的那样，我希望在模式窗口外单击时关闭模式。目前，即使在单击模态窗口后它也会关闭。

【问题讨论】：

点击孩子（cointainer），使用event.stopImmediatePropagation()。另请阅读event bubbling。
我会读这篇
所以基本上这里发生的是，当您在模态框内单击时，onclick 事件会冒泡到父 div，您隐藏模态框的位置。即父母的听众被解雇，因此行为。

标签： javascript preact

【解决方案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”类。如果您的点击点上没有“覆盖容器”，则模式关闭。

【讨论】：

不是这样的，我想通过点击外面的任何地方来关闭打开的模态框
这是用于点击外部：D
我会试试的：D
这仅在 OP 使用 JQuery 时才有效。目前，OP 只讨论 Javascript 和 Preact。
是的，所以我需要先转换它

【解决方案2】：

通过这样做来解决这个问题

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>

谢谢！

【讨论】：