Making React-Modal Non transparent

Asked Aug 09 '18 at 22:13

Active Aug 09 '18 at 23:08

Viewed 276 times

I am using react-modal in my code. Please find below its style,

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

When I click any row from my grid, modal pops up. But the issue is, when I click row, row gets highlighted and it shows up in front of modal. I do not want highlighted row or grid to distract Modal view.

How can I achieve this?

Thanks

edited Aug 09 '18 at 23:08

asked Aug 09 '18 at 22:13

Mangesh Tak

1

are you sure the modal is transparent? sounds like a zIndex issue? – azium Aug 09 '18 at 22:20
I have added image in question, you can see in picture that row is highlighted over modal. Also some header components. – Mangesh Tak Aug 09 '18 at 22:31
100% looks like a z-index issue to me. try bumping the z-index of the modal – azium Aug 09 '18 at 22:39
I tried z-index:1000, but no luck – Mangesh Tak Aug 09 '18 at 22:46
how did you try it? – azium Aug 09 '18 at 22:46
also, don't just try a random number. make sure it's higher than the zindex of the selected row – azium Aug 09 '18 at 22:50
I added zIndex to customstyles (in question), zIndex : 1000 – Mangesh Tak Aug 09 '18 at 22:53
but no `zIndex` ? – azium Aug 09 '18 at 22:57
can you take a screenshot of the elements panel to make sure its getting applied properly? – azium Aug 09 '18 at 22:58
I added screenshot in question. It is getting applied correctly – Mangesh Tak Aug 09 '18 at 23:08

Making React-Modal Non transparent

0 Answers0