Sm00rf9000 Sm00rf9000 - 4 months ago 32
HTML Question

Blur behind popup on page load issue

I am working on a site with a pop up, the only thing I am missing is a blur effect whenever this pop up is showing. This pop up will be showing every time the page loads, I therefore found a great blur code here on SO. Although that code is for a function where the blur effect is shown by a button.
Because of that I have changed the code, so that instead of the button it is now

onLoad
which is launched from the body tag.
The only issue is that the blur is showing up in front of the actual pop up which it isn't supposed to. I have tried to change the
z-index
in the CSS code for the pop up but it doesn't work.

Here is the JSFiddle for my code (modified) Also apparently this doesn't work on Safari.

HTML:

<div id="overlay">
<div id="popup">
<a href="javascript:myBlurFunction(0);">X</a>
</div>
</div>

<body id="main_container" onload="myBlurFunction(1)">

</body>


Javascript:

myBlurFunction = function(state) {
var containerElement = document.getElementById('main_container');
var overlayEle = document.getElementById('overlay');

if (state) {
overlayEle.style.display = 'block';
containerElement.setAttribute('class', 'blur');
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};


CSS:

.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

#overlay {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(255,255,255,.8);
z-index: 999;
}

#popup {
position: absolute;
width: 400px;
height: 200px;
background: rgb(255,255,255);
border: 5px solid rgb(90,90,90);
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}


Here is the JSFiddle for the stock code from the SO answer.

mtb mtb
Answer

body tag should wrap all page content. You might do as follows:

<body onload="myBlurFunction(1);">
  <div id="overlay"> 
   <div id="popup">
    <a href="javascript:myBlurFunction(0);">X</a> 
   </div>
  </div>

  <div id="main_container"> 
      Whatever
  </div>
</body>

See jsfiddle

Comments