title: Foundation Modal semi-transparent background cuts off
body: <p>Okay so here is the demo site:
  <a href="http://hayati.yahyauddin.com/" rel="nofollow noreferrer">http://hayati.yahyauddin.com/</a></p>
  
  <p>To see the modal, hover over a product and click the zoom button to display the quick view for the product.</p>
  
  <p>If you continue scrolling down, you will see that the Gray semi-transparent background stops. This problem occurs regardless of screen size!</p>
  
  <p><img src="https://i.stack.imgur.com/HVEMC.jpg" alt="Problem 1"></p>
  
  <p>Why does this happen and how can I fix this? </p>
  
  <p>Note: This problem does not seem to occur in the foundation website:
  <a href="http://foundation.zurb.com/docs/components/reveal.html" rel="nofollow noreferrer">http://foundation.zurb.com/docs/components/reveal.html</a></p>