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

Question

我在一个带有弹出窗口的网站上工作，我唯一缺少的是每当显示此弹出窗口时的模糊效果。每次加载页面时都会显示此弹出窗口，因此我在 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;
}

这是来自 SO 答案的股票代码 JSFiddle。

Answer 1

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

Answer 2

在这种情况下，这是因为您在 Body 中设置了模糊。我猜，最好的方法是创建一个 Div 来放置模糊，在弹出窗口后以 100% 显示此 div，Z 索引高于模糊。

Answer 3

对标签应用模糊会对所有内部标签产生影响，所以试试这种方法。

不要在正文本身上设置任何样式：

<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 class 添加到叠加层（未注释的代码）。

修改脚本：

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

fiddle: https://jsfiddle.net/uy4xvz12/19/

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

Blur behind popup on page load issue

html

javascript

css

popup

onload