6

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

Nicola Conee
  • 167
  • 2
  • 3
  • 12

2 Answers2

18

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/

xec
  • 17,349
  • 3
  • 46
  • 54
  • how do I do it if I have access only to JS on the website? I am a third party service provider to a website and I have access only to JS. Can I do something like, `temp = $('body').html()` `temp = '
    ' + temp + '
    '` `$('body').html(temp)` and then inserting the CSS to head of the page using jquery append but this doesnt seem to work.
     – scottydelta Oct 01 '13 at 09:03
  • @lemarc `$('body').html(anything)` sounds like a horrible idea, as it would overwrite the entire page... you probably want something like `$(document.body).prepend(yourHtml)` instead. It's also entirely possible to insert css ``s in the `` dynamically using `.append()` although not needed as you can attach styles directly to the element using `.css()`. If you can't get it working, try posting a new question about it. – xec Oct 01 '13 at 10:25
  • I figured out the method, I just appended the div to the body and modified the css using jquery. By the way you should consider using `window.body.scrollHeight` for height of the overlay or else it will only appear for the visible part of the window. – scottydelta Oct 02 '13 at 00:09
  • 1
    @lemarc yes, that's a good idea. you could also use `position: fixed;` instead of `absolute`. – xec Oct 07 '13 at 13:00
0

Blurring can be done like this:

.body {
    -webkit-filter: blur(10px);     
    filter: blur(10px);  
}

Now you just need jQuery to toggle the blur when the pop-up is shown.

ykadaru
  • 1,108
  • 2
  • 16
  • 32