<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>半透明遮蔽层div</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
<link rel="stylesheet" type="text/css" href="animations.css">
<script src="jquery-1.7.1.js" type="text/javascript" ></script>
<style>
* {
padding: 0px;
margin: 0px;
}
.shade {
background-color:#000; opacity:0.8; filter:alpha(opacity=80);
z-index: 8888;
height: 100%;
left: 0;
top: 0;
width: 100%;
position: fixed;
}
.city-wrapper {
width: 80%;
position: absolute;
z-index: 8888;
height: 300px;
background-color: #ffffff;
margin-top: 200px;
margin-left: 10%;
}
.city-list {
list-style: none;
}
.city-list li {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #eeeeee;
}
</style>
</head>
<body>
<input id="show" type="button" value="点击" />
<div class="shade"></div>
<div class="city-wrapper pt-page-moveCircle">
<ul class="city-list">
<li value="1">测试</li>
<li value="2">测试</li>
<li value="3">测试</li>
<li value="4">测试</li>
<li value="5">测试</li>
<li value="6">测试</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$(".shade").show();
$(".city-wrapper").show();
});
$(".shade, .city-wrapper").click(function() {
$(".shade").hide();
$(".city-wrapper").hide();
});
$(".city-list li").click(function() {
alert($(this).val());
});
});
</script>
</body>
</html>
分享到：
相关推荐
JavaScript（简称JS）遮蔽层是一种网页开发中的常见技术，用于在用户与页面交互时创建半透明或全屏覆盖的效果，通常用于加载提示、弹窗警告、模态对话框等场景。这种技术可以让用户专注于当前操作，提升用户体验。在...
为了实现遮蔽层，我们通常会创建一个全屏的 `div`，并设置较低的不透明度（如 `opacity: 0.5`）和背景色（如 `background-color: rgba(0, 0, 0, 0.5)`），以达到半透明效果，从而让背景页面模糊可见。 在压缩包中的...
首先，遮蔽层的设计目标是创造一种半透明或者全屏覆盖的效果，使得用户能够意识到当前的操作区域或信息是有限的，并且不会分散对其他界面元素的注意力。设计时通常会考虑以下几点： 1. 透明度：遮蔽层的透明度应该...
通过创建一个覆盖在页面上的透明或半透明div（层），可以有效地阻止用户与背景元素的互动，只允许他们与遮罩层内的特定元素交互。 首先，我们需要理解HTML和CSS的基本概念。HTML（超文本标记语言）是网页内容的结构...
`.loading-shade`类是遮罩层的样式，它设置为`position: fixed`以保持在屏幕上的位置，背景颜色为半透明黑色（`rgba(0,0,0,.5)`），并且设置`z-index`为102，确保它位于其他元素之上。`.personsex`类是弹出层的样式...
同时，需要清除之前设置的定时器，阻止图片继续滚动，并且使得其他图片的遮罩层透明度变为半透明。当鼠标离开当前图片时，通过mouseout事件触发的函数将重新激活定时器，恢复图片的滚动，并将其他图片的遮罩层透明度...
这种效果通常包括一个半透明的灰色遮蔽层（也称为蒙层）以及一个浮动的提示窗口，用于显示通知、警告或者确认信息。下面将详细阐述如何通过JavaScript实现这一功能。 首先，我们需要创建HTML结构。在页面上，你需要...