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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
javascript中expression的用法整理
May 13 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
JS document对象简单用法完整示例
Jan 14 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
杏林同学录(二)
2006/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php文件缓存类汇总
2014/11/21 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP实现简易blog的制作
2016/10/24 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
jquery批量控制form禁用的代码
2013/08/06 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
js实现图片实时时钟
2020/01/15 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python绘制热力图heatmap
2020/03/23 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python3几个常见问题的处理方法
2019/02/26 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
《姥姥的剪纸》教学反思
2014/02/25 职场文书
《海底世界》教学反思
2014/04/16 职场文书
2015学校年度工作总结
2015/05/11 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
检讨书格式
2019/04/25 职场文书
Python anaconda安装库命令详解
2021/10/16 Python