logo标签列表

页面加载时弹出窗口的模糊问题

javascripthtmlcsspopuponload
3
我正在处理一个带有弹出窗口的网站，唯一缺少的是每次显示此弹出窗口时都会出现模糊效果。由于这个弹出窗口将在每次页面加载时显示，因此我在这里找到了一个很棒的模糊代码。尽管该代码是用于通过按钮显示模糊效果的函数。
因此，我已更改了代码，以便在不使用按钮的情况下从标签启动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/。
3个回答
3

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。
非常感谢，我已经将它实现到我的原始代码中，现在它像魔法一样工作。 - Sm00rf9000
0
在这种情况下，是因为您正在设置Body中的模糊效果。 我想最好的方法是创建一个Div来放置模糊效果，并在弹出窗口后以比模糊效果更高的Z-index显示此div。
0
将模糊应用于标签会影响所有内部标签，因此请尝试以下方法。
不要在 body 上设置任何样式：
<body onload="myBlurFunction(true)">

不要将弹出窗口放在覆盖层内（我添加了一个按钮-您应该使用按钮而不是锚点）：

<div id="overlay" class="blur"></div>
<div id="popup">
  <button onclick="javascript: myBlurFunction(false);">X</button> 
  <a href="javascript: myBlurFunction(false);">LINK X</a> 
</div>

正如您所看到的，我直接将模糊CSS类添加到了遮罩层上（取消代码注释）。

修改您的脚本：

myBlurFunction = function(state) {
    var overlayEle = document.getElementById('overlay');
    var popupEle = document.getElementById('popup');

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

将您的弹出位置设置为固定，因为它不再在您的覆盖层中：
#popup {
    position: fixed;
}

小提琴: https://jsfiddle.net/uy4xvz12/19/

更新Fiddle以使其在FF中正常工作。https://jsfiddle.net/uy4xvz12/25/ - Wolfgang
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接