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

Question

我正在使用react-modal模式和通知。我想禁用模式上的覆盖/背景效果。我浏览了 API，但什么也看不到。

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

关于如何在没有背景的情况下仅显示模式的任何建议？请注意，如果在模式外部单击，我希望能够关闭模式。

标签： javascriptcssreactjsreact-modal

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%)"
  }
};