CODEWITHSUNDEEP
javascriptcssreactjsreact-modal
utopia
utopia

Reputation: 338

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

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.

Upvotes: 2

Views: 5358

Answers (3)

Yerrapotu ManojKiran
Yerrapotu ManojKiran

Reputation: 896

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

Upvotes: 3

kiteshjain
kiteshjain

Reputation: 63

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

Upvotes: 4

Linoy
Linoy

Reputation: 1395

I am hoping you can prevent this by adding some css

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

Upvotes: 1

Related Questions