我正在处理一个带有弹出窗口的网站,唯一缺少的是每次显示此弹出窗口时都会出现模糊效果。由于这个弹出窗口将在每次页面加载时显示,因此我在这里找到了一个很棒的模糊代码。尽管该代码是用于通过按钮显示模糊效果的函数。
因此,我已更改了代码,以便在不使用按钮的情况下从标签启动
这是我修改后的代码的JSFiddle。另外,显然这在Safari上不起作用。 HTML:
这是来自 SO 答案的股票代码的 JSFiddle,链接在此:http://jsfiddle.net/edMa4/177/。
因此,我已更改了代码,以便在不使用按钮的情况下从标签启动
onLoad
。唯一的问题是,模糊效果出现在实际弹出窗口的前面,这是不应该的。我尝试过更改CSS代码中弹出窗口的z-index
,但它没有起作用。这是我修改后的代码的JSFiddle。另外,显然这在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;
}
这是来自 SO 答案的股票代码的 JSFiddle,链接在此:http://jsfiddle.net/edMa4/177/。