頁面加載問題彈出後模糊

我在彈出的網站上工作，唯一缺少的是模糊效果，只要顯示彈出窗口。這個彈出窗口會在每次頁面加載時顯示，因此我在這裏找到了一個很棒的模糊代碼。儘管該代碼適用於通過按鈕顯示模糊效果的功能。因爲這個我已經改變了代碼，所以不是現在的按鈕，而是從主體標籤啓動的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

頁面加載問題彈出後模糊

回答

相關問題