js控制的遮罩层实例介绍


Posted in Javascript onMay 29, 2013

闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了。上代码:
父页面:

<div id='newDiv1' style="display: none;"> 
<%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> 
<%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp" flush=”true”/> --%> 
</div>

printCertDia.jsp 便是要显示的最上层jsp. 如果用jsp:include 页面便会报错,至于为什么还没研究,可能和加载顺序有关。
(在给标签变量取名字时候,如果变量和id名一样时候,js也会报错,要避免)
在父页面添加触发显示遮罩层js:
在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了。
style.zIndex 来控制覆盖的先后顺序(层级)
style.filter ,style.opacity 控制显示透明°。
//mask遮罩层 
var newMask = document.createElement("div"); 
newMask.id = m; 
newMask.style.position = "absolute"; 
newMask.style.zIndex = "1"; 
_scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth); 
_scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
newMask.style.width = _scrollWidth + "px"; 
newMask.style.height = _scrollHeight + "px"; 
newMask.style.top = "0px"; 
newMask.style.left = "0px"; 
newMask.style.background = "#666"; 
newMask.style.filter = "alpha(opacity=40)"; 
newMask.style.opacity = "0.40"; 
document.body.appendChild(newMask);

js控制父页面已经定义好的div显示:
newDiv=document.getElementById("newDiv1"); 
// var newDiv = document.createElement("div"); 
// newDiv.id = _id; 
newDiv.style.position = "absolute"; 
newDiv.style.zIndex = "9999"; 
newDivWidth = 700; 
newDivHeight = 600; 
newDiv.style.width = newDivWidth + "px"; 
newDiv.style.height = newDivHeight + "px"; 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; 
newDiv.style.background = "#F7F7EF"; 
newDiv.style.border = "1px solid #860001"; 
newDiv.style.padding = "5px"; 
newDiv.style.display='';

js控制父页面div滚动居中:
attachEvent ,addEventListener 对scroll 添加处理事件 newDivCenter
function newDivCenter() { 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; 
} 
if (document.all) { 
window.attachEvent("onscroll", newDivCenter); 
} 
else { 
window.addEventListener('scroll', newDivCenter, false); 
}

动态给父页面div添加关闭图层和遮罩层(需要修改):
var newA = document.createElement("a"); 
newA.href = "#"; 
newA.innerHTML = "关闭"; 
newA.onclick = function() { 
if (document.all) { 
window.detachEvent("onscroll", newDivCenter); 
} 
else { 
window.removeEventListener('scroll', newDivCenter, false); 
} 
document.body.removeChild(docEle("newDiv1")); 
document.body.removeChild(docEle(m)); 
document.getElementById("certImg").style.display=''; 
return false; 
} 
newDiv.appendChild(newA);
Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Vue.js实现价格计算器功能
Mar 30 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
深入理解JS异步编程-Promise
Jun 03 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
js控制web打印(局部打印)方法整理
May 29 #Javascript
js动态为代码着色显示行号
May 29 #Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 #Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 #Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 #Javascript
js仿百度有啊通栏展示效果实现代码
May 28 #Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
python模块restful使用方法实例
2013/12/10 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
商务日语专业的自荐信
2014/05/23 职场文书
优秀应届生求职信
2014/06/16 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL