Question

我正在考虑在用户点击＆＃34;帮助＆＃34;时添加单页叠加层。我创建的网络应用程序中的按钮。以下是我想要实现的一个例子

single page overlay

我使用javascript在我的网页上实现了jquery mobile。我查看了覆盖页面的jquery移动弹出式面板，但它不能满足我的需求。

我会做什么资源，图书馆，语言等？我尝试谷歌，但我得到了无关的结果。

Answer 1

我没有尝试过，但你可以把背景放在一个div中，让它留在经典背景后面（使用低css z-index），固定位置（绝对位置），固定宽度/高度（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");
})

我没有尝试过，也许还有一些小的东西需要改变以使其正常工作，但这是一个很好的开始。

一些参考资料

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

为app创建叠加页面

1 个答案: