4

当用户单击我创建的 Web 应用程序中的“帮助”按钮时，我正在考虑添加单页覆盖。下面是我想要实现的一个例子

单页叠加

我在我的页面上使用 javascript 实现了 jquery mobile。我查看了覆盖页面的 jquery 移动弹出面板，但它不符合我的目的。

我会去做哪些资源、库、语言等？我试图谷歌，但我得到不相关的结果。

4

1 回答 1

4

我没有尝试过，但是您可以将背景放在 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");
})

我还没有尝试过，也许还有一些小事情需要更改才能使其正常工作，但这是一个好的开始。

一些参考资料

于 2013-08-29T17:30:35.577 回答