2

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.

utopia
  • 322
  • 1
  • 4
  • 22

3 Answers3

4

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%)"
  }
};
kiteshjain
  • 63
  • 7
3

enter image description here

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;
}
Yerrapotu ManojKiran
  • 818
  • 7
  • 14
  • The unset is good. However, I solved it by passing it in customStyle rather than adding important in the css – utopia Jul 09 '20 at 12:12
1

I am hoping you can prevent this by adding some css

.modal-backdrop.show {
    opacity: 0 !important;
}
Linoy
  • 1,363
  • 1
  • 14
  • 29