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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
JS高级运动实例分析
Dec 20 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
JS实现4位随机验证码
Oct 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
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
解放思想大讨论活动心得体会
2014/09/11 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年财政所工作总结
2014/11/22 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技