当用户单击我创建的 Web 应用程序中的“帮助”按钮时，我正在考虑添加单页覆盖。下面是我想要实现的一个例子
我在我的页面上使用 javascript 实现了 jquery mobile。我查看了覆盖页面的 jquery 移动弹出面板，但它不符合我的目的。
我会去做哪些资源、库、语言等？我试图谷歌，但我得到不相关的结果。
问问题
1115 次
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");
})
我还没有尝试过，也许还有一些小事情需要更改才能使其正常工作，但这是一个好的开始。
一些参考资料
- 不透明度/透明度：http ://www.w3schools.com/css/css_image_transparency.asp
- jQuery CSS：http ://api.jquery.com/css/
于 2013-08-29T17:30:35.577 回答