Close Modal when clicking outside the modal

[vgoklani]

Hello - thanks for creating this!

Quick question - how do I configure the modal to close when the user clicks outside the modal? The current implementation requires the user to close the modal by pressing the "ESC" button while the mouse is over the modal.

Thanks!

[konekoya]

Do you use onRequestClose prop? It works correctly in this example

[diasbruno]

@vgoklani Have you find a solution for this issue?

[vgoklani]

@diasbruno I have not found a solution.

@konekoya I used the onRequestClose as below, but it doesn't work when the cursor is outside the modal

<Modal
    style={customStylesDarkTheme}
    closeTimeoutMS={10}
    isOpen={this.state.modalIsOpen}
    onRequestClose={this.handleModalCloseRequest}>
    <div>
        <p key={this.props.message.id + "bodyContent"} dangerouslySetInnerHTML={{ __html:this.props.message.body}}/>
    </div>
</Modal>

[diasbruno]

Ah! This is what you are looking for...

Using shouldCloseOnOverlayClick

[vgoklani]

I tried this, but it didn't work:

<Modal
    style={customStylesDarkTheme}
    closeTimeoutMS={10}
    isOpen={this.state.modalIsOpen}
    shouldCloseOnOverlayClick={true}
    onRequestClose={this.handleModalCloseRequest}>
    <div>
        <p key={this.props.message.id + "bodyContent"} dangerouslySetInnerHTML={{ __html:this.props.message.body}}/>
    </div>
</Modal>

[konekoya]

I think it would be better If you can put your code on codesanbox (or something similar) to reproduce the bug. That way, it will be a lot easier for people to help out.

[dominikabieder]

I have the same issue, I have both onRequestClose and shouldCloseOnOverlayClick, the modal doesn't close when I click outside of the popup to close it. I am using react hooks.

const ReviewSection = () => {
  const [ isOpen, setIsOpen ] = useState(false)
  return (
  ....
  <ModalPopup 
        className='CodeOfConductPopup' 
        isOpen={isOpen} 
        onRequestClose={() => setIsOpen(false)} 
        shouldCloseOnOverlayClick={true}
  >
    <ReviewCodeOfConductContent onCancel={() => setIsOpen(false)} />
  </ModalPopup>
 )
}

[thunder87]

Had the same issue as @dominikabieder - you need onRequestClose See the example here: https://codepen.io/claydiffrient/pen/woLzwo

[mmbrtstd]

Any update on this issue?

Had the same issue as @dominikabieder - you need onRequestClose See the example here: https://codepen.io/claydiffrient/pen/woLzwo

your codepen is not working. when I click outside the modal it isn't closing.

[denisgrabina]

Still no solutions? 😞

[diasbruno]

Hi @denisgrabina @marco-000, which react version are you using? Can you provide an example?

[diasbruno]

From the docs:

- Boolean indicating if the overlay should close the modal, `true` by default
shouldCloseOnOverlayClick={true}

- Function that will be run when the modal is requested
- to be closed (either by clicking on overlay or pressing ESC).
- Note: It is not called if isOpen is changed by other means.
onRequestClose={handleRequestCloseFunc}

Remember that handleRequestCloseFunc must set the variable used on isOpen to false.

If this doesn't work, we may have a problem.

[mmbrtstd]

@diasbruno Yes I got it working with the onRequestClose. Thank you.

[diasbruno]

Awesome, @marco-000.

I'm going to close this issue, since we can't confirm that it is a bug.

@denisgrabina, reopen if you need any help with this.

[andyseracuse]

this is most definitely a bug. We found a workaround with the following.

add stopPropogation to the code and it will work. i.e. (using the code from @dominikabieder above) ...

const ReviewSection = () => {
  const [ isOpen, setIsOpen ] = useState(false)
  return (
  ....
  <ModalPopup 
        className='CodeOfConductPopup' 
        isOpen={isOpen} 
        onRequestClose={**(e) => e.stopPropogation(); setIsOpen(false)**;} 
        shouldCloseOnOverlayClick={true}
  >
    <ReviewCodeOfConductContent onCancel={() => setIsOpen(false)} />
  </ModalPopup>
 )
}

[DeMokry]

I found a solution in backdrop option.

 <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >

Link: https://react-bootstrap.github.io/components/modal/#static-backdrop

[GorkemSahin]

Those of you who are having this problem is probably because you're setting ReactModal CSS to occupy the whole width and height of the screen using the className prop, so no click registers as an outside click. I figured this out minutes ago after seeing so many issues where people were complaining that the shouldCloseOnOverlayClick prop didn't work, except that it worked on all examples given by the developers of the library.

[dminazarov]

Clicking event is triggered in .modal div. I think that it should be in .modal-dialog. Anyways, you can add custom styles or override .modal style to keep .modal-dialog body width & height. inset: 50% auto auto 50%; margin-right: -50%; transform: translate(-50%, -50%);