gpt4 book ai didi

javascript - 在页面加载问题的弹出窗口后面模糊

转载 作者:可可西里 更新时间:2023-11-01 13:01:22 26 4
gpt4 key购买 nike

我在一个带有弹出窗口的网站上工作,我唯一缺少的是每当显示此弹出窗口时的模糊效果。每次加载页面时都会显示此弹出窗口,因此我在 SO 上找到了一个很棒的模糊代码。尽管该代码用于通过按钮显示模糊效果的功能。因此,我更改了代码,现在不再是按钮,而是从 body 标签启动的 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;
}

这是 JSFiddle从 SO 答案中获取股票代码。

最佳答案

body 标签应该包裹所有页面内容。你可以这样做:

<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>

参见 jsfiddle

关于javascript - 在页面加载问题的弹出窗口后面模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38702087/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com