私は試していませんが、背景をdivに配置して、固定位置(絶対位置)、固定幅/高さ(100%/ 100 %) と透明度。
ユーザーが「ヘルプ」ボタンをクリックすると、z-index が変更され、ページの先頭に配置されます。
更新
次のような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");
})
「非表示」機能も実装して、一部のアクションで重なっている画像を「リセット」する必要があります。おそらく次のようなものです。
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
私はそれを試していません。おそらく、正しく動作させるために変更する必要がある小さなことがいくつかありますが、それは良い始まりです.
参考文献