如何使用反应模态显示没有背景效果的模态？

Question

我正在为模式和通知使用 react-modal。我想禁用 overlay/backdrop 对模态的影响。我浏览了 API，但我什么也看不到。

这是我设置的基本模式。 https://codesandbox.io/s/upbeat-ptolemy-g0pyb?file=/src/App.js

关于如何只显示模式而不显示背景有什么建议吗？请注意，如果在模态框外单击，我希望能够关闭模态框。

Answer 1

我希望你可以通过添加一些 css

来防止这种情况

.modal-backdrop.show {
    opacity: 0 !important;
}

Answer 2

您需要向 customStyles 添加覆盖选项，alpha 为 0。像这样

const customStyles = {
  overlay: {
    backgroundColor: "rgba(0, 0, 0, 0)"
  },
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)"
  }
};

Answer 3

正如您从图片中看到的那样，我已经删除了背景色属性以删除叠加层

styles.css

.ReactModalPortal .ReactModal__Overlay.ReactModal__Overlay--after-open {
  background-color: unset !important;
}

如何使用反应模态显示没有背景效果的模态？

How to display modal without backdrop effect with react-modal?

javascript

css

reactjs

react-modal