javascript - 如何使用 react 模态显示没有背景效果的模态？

Question

我正在为模式和通知使用 react-modal。 我想禁用模态上的叠加/背景效果。我浏览了 API，但看不到任何相关信息。

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

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

Answer 1

您需要将覆盖选项添加到 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%)"
  }
};