在外部点击时实现模式关闭

Question

I've been trying to implement an onclick modal close in my system. I already implemented a modal onclick event using a close button but haven't done it successfully when clicking outside the modal

I already tried adding onclick listener on the div but the content is closing even clicking inside the modal window.

<div
                className={"Overlay " + (this.state.hidden? "hidden": "show")}
                id={this.props.id + "-container"} onClick={() => {
                this.setState({ hidden: true })
            }}>

here's my modal box rendering code so far

 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>
        );
    }

as expected i want the modal to be close when clicking outside the modal window. currently it's closing even after clicking the modal window.

Answer 1

<script>
$('html').click(function(e) {
        if(!$(e.target).hasClass("Overlay-container")) {
             document.getElementById('Overlay-container').style.display = "none" 
        } 
});
</script>

your code switch the state show or hidden when you click on it(Of course you can't click closed one)

This function works when your click has no class element named "Overlay-container"

//add description
when you click your 'html', 'if' checks where you clicked and has class 'Overlay-container'. And if there's no 'Overlay-container' on your click point, modal close.

Answer 2

Manage to solved this by doing this one

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>

Thanks!