React-modal: Not getting closed when clicked outside

[anandrikka]

When clicked outside modal i.e on overlay modal is not getting closed

<Modal isOpen={this.state.openDialog} contentLabel="Modal" shouldCloseOnOverlayClick={true} style={this.modalClass}> <h2>Hello</h2> <div>I am a modal</div> </Modal>

this.modalClass = {
            overlay: {
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: 'rgba(0, 0, 0, 0.3)',
                zIndex:999
            },
            content: {
                position: 'absolute',
                top: '40px',
                left: '40px',
                right: '40px',
                bottom: '40px',
                border: '1px solid #ccc',
                background: '#fff',
                overflow: 'auto',
                WebkitOverflowScrolling: 'touch',
                borderRadius: '4px',
                outline: 'none',
                padding: '20px',
                zIndex:9999

            }
        };

Expected behavior: Should close when clicked outside modal

Additional Information: I have another overlay with zIndex '3' on a background image. With more z-index I'm able to see the modal on top of everything, but not getting closed

[claydiffrient]

You need to have a onRequestClose prop on the modal. That will let the modal know what to do in order to close. Something as simple as onRequestClose={() => this.setState({openDialog: false}) should do it for you.

I'll make sure to note this down and make sure it's documented more clearly. We're changing things around the props for v2 see #282 for more details.

[anandrikka]

@claydiffrient Thanks man !!!