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

Question

I am using react-modal for both modals and notifications. I would like to disable the overlay/backdrop effect on the modal. I went through the API and I can't see anything about it.

Here is a basic modal I set up. https://codesandbox.io/s/upbeat-ptolemy-g0pyb?file=/src/App.js

Any suggestions on how only display the modal without the backdrop ? Note that I want to be able to close the modal if click outside of it.

Answer 1

You need to add overlay option to customStyles with alpha has 0. Something like this

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 2

As you can see from the image, i've removed background color property to remove overlay

styles.css

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

Answer 3

I am hoping you can prevent this by adding some css

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