Creating a css and jquery fade/blur background when popup is visible
I have looked at other questions and had no luck trying to integrate other answers to my own code.
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.
I have created a jsfiddle to try and demonstrate what my code currently looks like.
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.
I have created overlay as the style to display behind the popup but still no luck.
I have tried attaching multiple classes to the function but it breaks the code and no popup appears.
This is my .overlay css:
.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;
}
This is the function that I created from a tutorial explaining how to do this:
// blur background
$(".overlay").css("height", $(document).height());
$(".toggleLink").click(function(){
$(".overlay").fadeIn();
return false;
});
$(window).bind("resize", function(){
$(".overlay").css("height", $(window).height());
});
This is my fiddle
Any ideas?
Answer
There is a lot of code posted in the question (and even more in the demo) that doesn't seem to have anything to do with the question being asked. This is more or less all you need for a simple overlay;
css
.overlay {
position:fixed;
display:none;
/* color with alpha channel */
background-color: rgba(0, 0, 0, 0.7); /* 0.7 = 70% opacity */
/* stretch to screen edges */
top: 0;
left: 0;
bottom: 0;
right: 0;
}
html
Make sure this is a child (direct descendant) of <body>, or that there are no positioned ancestors. (The term "positioned" refers to an element with a position value other than static)
<div class="overlay"></div>
javascript
Place inside dom ready event or place at end of <body>
// rather than "body", you will want to tweak this selector
$("body").click(function() {
$(".overlay").toggle(); // show/hide the overlay
});
Here's a demo including a popup with the overlay: http://jsfiddle.net/5aWhE/19/