<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（超文本标记语言）是网页内容的结构...
很好用的一个功能,可以随意在弹出的层上显示需要提醒的内容,并以可以定义用户关闭这个层后需要跳转的页面!调用的方法如下,如下的代码的意思是:弹出提示"帐号激活成功..."的对话框后,关闭层将跳转到default.aspx页面...
遮蔽层则是背景变暗效果的一个组成部分，它通常是一个半透明的黑色或灰色层，覆盖在整个页面上，使得用户无法与背景元素交互，从而专注于弹出的内容。 在描述中提到的“弹出层现成代码”是指开发人员可以使用的预...
2. **Shader编程**：通过编写着色器程序，可以在GPU级别上控制像素的Alpha混合，实现更为复杂的透明效果，如法线映射、环境光遮蔽等。 3. **游戏引擎内置功能**：许多现代游戏引擎如Unity、Unreal Engine等都内置了...
页面常用的遮蔽层，使用者可以根据自己的情况对代码进行修改。
对具有一维高斯分布粗糙表面的半透明介质层光谱散射，基于微面斜率法建立了考虑遮蔽效应的粗糙表面光谱辐射传递概率模型，采用蒙特卡罗法模拟光谱辐射能束在粗糙表面、半透明介质层介质与镜反射基底之间的多次反射、...
在C#编程中，"屏幕遮蔽"通常指的是在用户界面（UI）上创建一个半透明的覆盖层，用于隐藏屏幕上的部分内容或者提供一个聚焦点，例如在进行更新、加载或执行其他操作时。实现这样的功能可以提升用户体验，因为它们为...
在网页设计中，遮罩层（Mask Layer）是一种常见的交互元素，它用于在用户与页面交互时提供一种半透明或全黑的覆盖效果，通常用于弹窗、加载提示或者阻止用户对背景内容的操作。本教程将详细介绍如何使用jQuery和CSS...
通过对源因子、目标因子以及混合操作的精细控制，开发者可以创造出丰富多彩的图形渲染效果，如半透明、叠加、环境光遮蔽等。理解和掌握混合技术，对于提高OpenGL项目的视觉质量至关重要。随着对OpenGL深入的学习，...
调用方式 onclick="ChuangJianDIV('要弹出的组建ID','弹出DIV的宽','弹出DIV的高','遮蔽div的透明度','弹出div的速度','遮蔽div的背景色','弹出div的背景色');" 如：onclick="ChuangJianDIV('divID','500','300','...
DIV浮动层被FLASH遮挡，这种情况想必有很多人都有遇到过吧，下面针对，主流浏览器做了下解决方案，感兴趣的朋友可以参考下
三维地图，用于计算地形遮蔽等计算时的DEM数据
在实际项目中，开发者可以根据需求调整这个Shader，例如添加法线贴图、环境光遮蔽、自定义光照模型等，以实现更复杂的效果。同时，可以通过Material（材质）将Shader应用到游戏对象上，并调整属性以达到预期的视觉...
标题“电信设备-具有可自由移动遮蔽体的遮蔽装置”指的是这样一种特殊设计的遮蔽设备，它允许遮蔽体根据需要进行自由移动，以满足不同测试条件和环境的要求。这种灵活性对于确保精确的电磁兼容性（EMC）测试和优化...
本教程将深入探讨如何利用SVG实现斑点图像遮蔽效果，这是一种常见的视觉特效，常用于网页设计、交互式应用或动态图像展示。在JavaScript开发中，这种技术可以提升用户体验，为图片展示处理增添动态元素。 首先，...
`.loading-shade`类是遮罩层的样式，它设置为`position: fixed`以保持在屏幕上的位置，背景颜色为半透明黑色（`rgba(0,0,0,.5)`），并且设置`z-index`为102，确保它位于其他元素之上。`.personsex`类是弹出层的样式...
遮罩层效果是指在 PopupWindow 显示时，背景变为半透明，使得用户可以看到背景图像，但又不会影响到前景图像的显示。这种效果可以提高用户体验，增强交互性。 二、实现遮罩层效果的步骤 1. 创建 PopupWindow 对象 ...