如何防止在 React Modal 之外点击？

Question

我目前正在使用反应模态package。

我想禁用点击和滚动外部反应模式组件。

Answer 1

将此行添加到模态组件

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

或使用event.preventDefault()进行修复

Answer 2

1.当模式打开时，向父元素添加一个类，

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

如果您已将整个页面包装在模式包装器中，则将此类添加到包装器中

Answer 3

将shouldCloseOnOverlayClick道具用于<ReactModal />进行外部点击。 当模式打开时，它添加.ReactModal__Body--open到主体。 （它可以重命名。）您可以添加overflow-y: auto; 到 css 中的 class 进行外部滚动。