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中自动切换焦点实现代码
Dec 15 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
js实现导航跟随效果
Nov 17 Javascript
Vue实现简单分页器
Dec 29 Javascript
前端Electron新手入门教程详解
Jun 21 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 多行多列显示
2009/08/15 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
通过js修改input、select默认字体颜色
2017/04/19 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
js canvas实现星空连线背景特效
2019/11/01 Javascript
python去除所有html标签的方法
2015/05/05 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
班组长岗位职责范本
2014/01/05 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
学习交流会主持词
2014/04/01 职场文书
捐资助学感谢信
2015/01/21 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python