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 相关文章推荐
javascript学习笔记(四)function函数部分
Sep 30 Javascript
Javascript基础教程之变量
Jan 18 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
input的focus方法使用
2010/03/13 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue组件的写法汇总
2018/04/12 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python编写计算器功能
2019/10/25 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
高三生物教学反思
2014/01/25 职场文书
党风廉政建设责任书
2014/04/14 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
逃课检讨书
2015/01/26 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技