title: Black and White overlay behind modal window
body: <p>help needed once again.
  Have a button that calls modal popup, that in turn calls div.overlay. css snippet of class <code>overlay</code>:</p>
  
  <pre><code>.overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   z-index: 100;
   background: rgba(0,0,0,0.7);
  }
  </code></pre>
  
  <p>pretty standard situation. What I need is, the overlay to acts as sort of filter for the background behind it, to paint the <code>body</code> black and white.
  now I know there is <code>css</code> <code>grayscale()</code>, trouble is when I apply</p>
  
  <pre><code>body {
   filter: grayscale(100%);
  }
  </code></pre>
  
  <p>along with <code>.overlay</code> - my modal popup turns black and white as well..
  Any ideas on how to achieve black and white body, that could not be interacted(cant click on anything behind modal) with like an overlay at the same time not to make modal window black and white too.</p>