页面加载问题弹出后模糊

我在弹出的网站上工作，唯一缺少的是模糊效果，只要显示弹出窗口。这个弹出窗口会在每次页面加载时显示，因此我在这里找到了一个很棒的模糊代码。尽管该代码适用于通过按钮显示模糊效果的功能。因为这个我已经改变了代码，所以不是现在的按钮，而是从主体标签启动的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回答的股票代码。

来源

2016-08-01 Sm00rf9000

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

来源

2016-08-01 15:14:19 mtb

非常感谢你，我有实现它到我原来的代码，它现在像一个魅力工作。 – Sm00rf9000

在这种情况下，那是因为你设置在机身的模糊。我猜，最好的选择是创建一个Div来放置模糊，e在弹出后用100％e显示这个div，Z-index高于Blur。

来源

2016-08-01 15:24:17

对标签应用模糊会对所有内部标签产生影响，因此请尝试使用此方法。

做没有设置对身体本身的任何样式：

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

正如您所看到的，我直接将blur 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/

来源

2016-08-01 15:24:46 Wolfgang

更新为小提琴，使其在FF中工作。 https://jsfiddle.net/uy4xvz12/25/ – Wolfgang

页面加载问题弹出后模糊

回答

相关问题