How to use "closeOnOutsideClick" with full screen overlay? #2
Description
@tajo I'd like to have closeOnOutsideClick={true} with a modal that has a full screen overlay.
The problem is that I cannot really click outside the full screen overlay, thus the expected "click outside the dialog to close it" behaviour doesn't work.
Is there a way to have a full screen overlay with a dialog on top, and close the dialog once the overlay is clicked (outside the dialog)?
Here is my attempt:
let Help = React.createClass({ render() { let helpButton = ( <button type="button">Help</button> ); return ( <Portal openByClickOn={helpButton} closeOnEsc={true} closeOnOutsideClick={true}> <HelpModal /> </Portal> ); } }); let HelpModal = React.createClass({ render() { return ( <div className="modal-overlay"> <div className="modal"> <button type="button" onClick={this.props.closePortal}>Close</button> <h3>My modal header</h3> </div> </div> ); } }); .modal-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .modal { position: absolute; top: 100px; left: calc(50% - 400px); width: 800px; height: 300px; }