Search code examples
javascriptreactjsreact-modal

Is it possible to make react-modal transparent?

So I've added modal to my project. Now I've added it with installing a package called react-modal.

Everything works great, I just can't make it transparent.

When users get on a single article page, if he wants, on a click a button opens a modal with a form. Now I want to keep the form box centered, everything else transparent(so a user can see the background).

Now react-modal uses customStyles and I've tried adding into it backgroundColor: 'rgba(0, 0, 0, 0.5)' and few other backgroundColor but nothing really worked. I've also tried adding transparent={true} into the <Modal /> but that doesn't work.

Here where I use modal:

import Modal from 'react-modal';

Modal.setAppElement('#root');

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};

<Modal
  isOpen={isOpen}
  onRequestClose={toogleModal}
  style={customStyles}
  transparent={true}
  contentLabel='Forma'
>

And here is a picture when the modal is open: modal

It's only saying that u need to register first, and if u have an account it opens a form.

So is it even possible to make it transparent? I want to keep just this box with an outline, and everything that is white, to make it transparent so users can see the background page.

Thanks!

Solution

  • It looks to me like the styling was done by something else that you set earlier (or from other styling library). Can you post more code of the content: the one with the "Please register first"? Also you can try opacity: '50%' (or whatever percent you want).