Creating a css and jquery fade/blur background when popup is visible

jquery html css popup fade

33,830

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
});

http://jsfiddle.net/5aWhE/17/

Here's a demo including a popup with the overlay: http://jsfiddle.net/5aWhE/19/

33,830

Author by

Nicola Conee

Updated on July 05, 2022

Comments

Nicola Conee almost 2 years
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?

Fiddle