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 相关文章推荐
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
js 窗口抖动示例
Sep 04 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
浅谈React碰到v-if
Nov 04 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
Vue的Options用法说明
Aug 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
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫