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 一些用法小结
Sep 11 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
Node.js返回JSONP详解
May 18 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php session和cookie使用说明
2010/04/07 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
深入理解Python装饰器
2016/07/27 Python
Python中修改字符串的四种方法
2018/11/02 Python
实时获取Python的print输出流方法
2019/01/07 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Numpy数组的广播机制的实现
2020/11/03 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
《钱学森》听课反思
2014/03/01 职场文书
机房搬迁方案
2014/05/01 职场文书
咖啡店创业计划书
2014/08/15 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
故意伤害辩护词
2015/05/21 职场文书