Реализовать модальное закрытие по клику снаружи - PullRequest
Новая
       24

Реализовать модальное закрытие по клику снаружи

1 голос
/ 27 мая 2019

Я пытался внедрить модальное закрытие onclick в моей системе. Я уже реализовал модальное событие onclick, используя кнопку закрытия, но не сделал это успешно, когда щелкнул за пределами модального

Я уже пытался добавить прослушиватель onclick на div, но содержимое закрывается, даже если щелкнуть внутри модального окна. 

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

, как и ожидалось, я хочу, чтобы модал был закрыт при нажатии за пределами модального окна. в настоящее время он закрывается даже после нажатия модального окна.

Ответы [ 2 ]

1 голос
/ 27 мая 2019

Решите это, выполнив это 

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>

Спасибо!

1 голос
/ 27 мая 2019 
<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 ».И если в точке щелчка нет «оверлейного контейнера», модальное закрытие.

...