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. =/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.

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.

• javascript
• css
• reactjs
• react-modal

3 Answers 3

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

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;
}

I am hoping you can prevent this by adding some css

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