'How to prevent click outside React Modal?

I'm currently using react-modal package.

I want to disable click and scroll outside react modal component.

Solution 1:^[1]

add this line to your modal component

    <ReactModal 
       //other props declaration..
       shouldCloseOnOverlayClick={false} // add this to prevent outside click to prevent modal close 
    >

or use event.preventDefault() to fix it

Solution 2:^[2]

1.Add a class to the parent element when the modal opens,

.inactive {
  pointer-events: none; // pointer-events not supported below IE11
  position: fixed;
}

If your have wrapped the entire page in the modal Wrapper, then add this class to the wrapper

Solution 3:^[3]

use shouldCloseOnOverlayClick prop for <ReactModal /> for outside click. when the modal is open, it adds .ReactModal__Body--open to body. (it's rename-able.) You can add overflow-y: auto; to that class in css for outside scrolling.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kumar Albert
Solution 2	Jayabalaji J
Solution 3	aweimon

'How to prevent click outside React Modal?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]