爲應用程序創建覆蓋頁面

當用戶單擊我創建的Web應用程序中的「幫助」按鈕時，我正在考慮添加單頁覆蓋頁面。下面是我想達到爲應用程序創建覆蓋頁面

我有我的JavaScript的網頁執行jQuery Mobile的一個例子。我研究了覆蓋頁面的jquery移動彈出式面板，但它不符合我的目的。

我會這樣做的是什麼資源，圖書館，語言等？我試圖谷歌，但我得到不相關的結果。

2013-08-29 user2615490

我還沒有嘗試，但你可以把背景放在一個固定的位置（絕對位置），固定的寬度/高度（經典的背景（使用低css z-index） 100％/ 100％）和透明度。

當用戶單擊「幫助」按鈕時，更改z-index將其放在頁面的前端。

UPDATE
假設類似這樣的HTML佈局：

<html> 
<head>...</head> 
<body> 
<div id="container"> 
    <!-- some others divs with the content of the page and the help link --> 
    <a href="#" id="help_button">HELP</a> 
</div> 
<div id="over_image"> <!-- add this --> 
    <img src="path_to_the_overlapping_image" alt="overlap image" /> 
</div> 
</body> 
</html>

默認CSS這樣

div#container { 
z-index: 100; 
} 

div#over_image { 
z-index: -100; // by default the over image is "behind" the page 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; // or puts the width/height of the "screen" in pixels 
height: 100%; 
} 

div#over_image img { 
width: 100%; 
height: 100%; 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
}

，並在年底的jQuery函數

$("a#help_button").on("click", function(event){ 
event.preventDefault(); // it's not really a link 
$("div#over_image").css("z-index", "1000"); 
})

你sh LD落實「隱藏」功能太多，「重置」重疊圖像上的一些動作，也許是這樣的：

$("div#over_image img").on("click", function(){ 
// when the user click on the overlap image, it disappears 
$("div#over_image").css("z-index", "-100"); 
})

我還沒有嘗試一下，也許還有一些更小事情換作它工作正常，但這是一個好的開始。

一些參考

不透明度/透明度：http://www.w3schools.com/css/css_image_transparency.asp
jQuery的CSS：http://api.jquery.com/css/

來源

2013-08-29 17:30:35 damoiser

將是不錯的張貼任何實際的例子，這是一個疑問，我也有！ – Saxophonist

@Evandro我已經更新了我的答案，正如我所說的，也許還有一些小的事情要改變，以使其正常工作（我還沒有測試過） – damoiser

我對這個話題也很感興趣，但我認爲問題所有者應該接受它。但看看你發送的代碼，看起來很符合他的預期。你從某個地方拿過這個例子嗎？如果是這樣，可以與我們分享？謝謝！！ – Saxophonist

爲應用程序創建覆蓋頁面

回答

相關問題