title: Creating a css and jquery fade/blur background when popup is visible
body: <p>I have looked at other questions and had no luck trying to integrate other answers to my own code.</p>
  
  <p>At the moment, when the mouse hovers a slide down appears and when you click on the image the popup appears. I just need to fade out the background when this popup is in view.</p>
  
  <p>I have created a jsfiddle to try and demonstrate what my code currently looks like.</p>
  
  <p>I'm trying to create a fade/dimmed effect on the entire page when the popup is visible, which will then disappear when the popup is closed.</p>
  
  <p>I have created overlay as the style to display behind the popup but still no luck.</p>
  
  <p>I have tried attaching multiple classes to the function but it breaks the code and no popup appears.</p>
  
  <p>This is my .overlay css:</p>
  
  <pre><code>   .overlay{
  background-image: url(http://dummyimage.com/600x400/000/000);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:100; 
  display:none; 
  text-align:left; 
  }
  
  .toggledDiv {
  height: 0px;
  overflow: hidden;
  z-index:10;
  width: 130px;
  padding-left:5px;
  padding-right:5px;
  margin-left: 15px;
  background-color:white;
  box-shadow: 5px 5px 5px #333;
  }
  </code></pre>
  
  <p>This is the function that I created from a tutorial explaining how to do this:</p>
  
  <pre><code>// blur background
  $(".overlay").css("height", $(document).height());
  
  $(".toggleLink").click(function(){
    $(".overlay").fadeIn();
    return false;
  });
  
  $(window).bind("resize", function(){
  $(".overlay").css("height", $(window).height());
  });
  </code></pre>
  
  <p>This is my fiddle</p>
  
  <p>Any ideas?</p>
  
  <p><a href="http://jsfiddle.net/nicolaalocin/5aWhE/15/" rel="noreferrer">Fiddle</a></p>