Menu
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
929
Create a toggle button to open the modal window. The main CSS styles for the modal window. Style and position the modal close button. Blur the main content using CSS3 filters.
So, here's how to create a background blur using the backdrop-filter CSS property. backdrop-filter: blur(5px); That's it.
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
The trick is to use background-position:fixed; on html / body and the element to blur on top of it, so , both background-image lays on the same area of the window. The duplicate uses an extra element, this can be a pseudo element if you do not wish to modify HTML structure. Flex can also be used to center body.
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;
.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;
}
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>
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/
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
