js实现在页面上弹出蒙板技巧简单实用


Posted in Javascript onApril 16, 2013

蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明。maskLayer 在popWindow上面,用于显示蒙板的信息,比如“载入中……“

<html> 
<head> 
<style type="text/css"> 
.popWindow { 
background-color:#9D9D9D; 
width: 100%; 
height: 100%; 
left: 0; 
top: 0; 
filter: alpha(opacity=50); 
opacity: 0.5; 
z-index: 1; 
position: absolute; } 
.maskLayer { 
background-color:#000; 
width: 200px; 
height: 30px; 
line-height: 30px; 
left: 50%; 
top: 50%; 
color:#fff; 
z-index: 2; 
position: absolute; 
text-align:center; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
function showDiv() { 
document.getElementById('popWindow').style.display = 'block'; 
document.getElementById('maskLayer').style.display = 'block'; 
} 
function closeDiv() { 
document.getElementById('popWindow').style.display = 'none'; 
document.getElementById('maskLayer').style.display = 'none'; 
} 
</script> 
</head> 
<body> 
<div onclick="showDiv()" style="display:block; cursor:pointer"> 
弹出蒙板 
</div> 
<div id="popWindow" class="popWindow" style="display: none;"> 
</div> 
<div id="maskLayer" class="maskLayer" style="display: none;"> 
<a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;"> 
关闭蒙板 
</a> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
js字符串操作方法实例分析
May 06 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 #Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 #Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 #Javascript
jquery表格内容筛选实现思路及代码
Apr 16 #Javascript
js实现图片轮换效果代码
Apr 16 #Javascript
js相册效果代码(点击创建即可)
Apr 16 #Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php存储过程调用实例代码
2013/02/03 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
一些mootools的学习资源
2010/02/07 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
python笔记(2)
2012/10/24 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
关于梦想的演讲稿
2014/05/05 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2015年教研组工作总结
2015/05/04 职场文书
胡桃夹子观后感
2015/06/11 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫