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 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
原生js实现日历效果
Mar 02 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 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调用mysql存储过程
2007/02/14 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
QML实现圆环颜色选择器
2019/09/25 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
《骆驼和羊》教学反思
2014/02/27 职场文书
企业人事任命书
2014/06/05 职场文书
员工生日会策划方案
2014/06/14 职场文书
追悼会答谢词
2015/01/05 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
计划生育个人总结
2015/03/02 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang