i working on site pop up, thing missing blur effect whenever pop showing. pop showing every time page loads, therefore found great blur code here on so. although code function blur effect shown button. because of have changed code, instead of button onload launched body tag. issue blur showing in front of actual pop isn't supposed to. have tried change z-index in css code pop doesn't work.
here jsfiddle code (modified) apparently 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 jsfiddle stock code answer.
body tag should wrap page content. might 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
Post a Comment