js css 实现遮罩层覆盖其他页面元素附图


Posted in Javascript onSeptember 22, 2014
<div style=" position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div>

z-index 必须大于遮罩元素

demo

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
ul, ul ul { 
list-style-type:none; 
margin: 0; 
padding: 0; 
width: 15em; 
} 

ul a { 
display: block; 
text-decoration: none; 
} 

ul li { 
margin-top: 1px; 
} 

ul li a { 
background: #333; 
color: #fff; 
padding: 0.5em; 
} 

ul li a:hover { 
background: #000; 
} 

ul li ul li a { 
background: #ccc; 
color: #000; 
padding-left: 20px; 
} 

ul li ul li a:hover,ul li ul .current a { 
background: #aaa; 
border-left: 5px #000 solid; 
padding-left: 15px; 
} 

</style> 
</head> 

<body> 
<div id="bb" style="background-color: red;display:none;z-index: 99999; max-height:79.3%; position: fixed; filter: alpha(opacity=70); Opacity:0.7; top: 10px; left:5px;"> 
<ul> 
<li> 
<a href="">老大</a> 
<ul> 
<li> 
<a href="javascript:alert('you can do you want');">老大大</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大三</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老大四</a> 
<li> 
</ul> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老二</a> 
<li> 
<li> 
<a href="javascript:alert('you can do you want');">老三</a> 
<li> 
<li> 
<a href="">老四</a> 
<ul > 
<li><a href="javascript:alert('you can do you want');">老一</a><li> 
</ul> 
<li> 
</ul> 
</div> 
<br> 
<br> 
<br> 
<br> 
<br> 
<br> 

<br> 
<br><br><br> 
<br> 
<br> 
<button id="aa">哈哈</button> 
<div id="zz" style="display:none;position: fixed; width: 100%; height: 100%; 
left: 0px; top: 0px; background-color: Black; z-index: 1999; filter: alpha(opacity=70); Opacity:0.7;"></div> 
</body> 
<script type="text/javascript"> 
$(function(){ 
$("#aa").click(function(){ 
$("#zz").show(); 
$("#bb").show(); 
$("#bb").animate({left:'100px'}); 
$("#bb").animate({left:'0px'}); 
}); 
$("#zz").click(function(){ 
$("#bb").animate({left:'-240px'}); 
$("#zz").hide(); 
}); 
$('#bb ul li ul').hide(); 
$("#bb ul li a").click(function(){ 
var a= $(this); 
var nextobj=a.next(); 
if(nextobj.is("ul")){ 
$('#bb ul li ul:visible').slideUp('normal'); 
if(!nextobj.is(':visible')){ 
nextobj.slideDown('normal'); 
} 
return false; 
} 
}); 
}); 
</script> 
</html>

js css 实现遮罩层覆盖其他页面元素附图

Javascript 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 #Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 #Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 #Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 #Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 #Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 #Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
JavaScript中this详解
2015/09/01 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python @property使用方法解析
2019/09/17 Python
flask开启多线程的具体方法
2020/08/02 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
学年自我鉴定范文
2013/10/01 职场文书
军训自我鉴定
2013/12/14 职场文书
银行开业庆典方案
2014/02/06 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
优秀党员推荐材料
2014/12/18 职场文书
东京审判观后感
2015/06/01 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Golang 实现WebSockets
2022/04/24 Golang