js控制的遮罩层实例介绍
2013-05-29 00:00
344 查看
闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了。上代码:
父页面:
printCertDia.jsp 便是要显示的最上层jsp. 如果用jsp:include 页面便会报错,至于为什么还没研究,可能和加载顺序有关。
(在给标签变量取名字时候,如果变量和id名一样时候,js也会报错,要避免)
在父页面添加触发显示遮罩层js:
在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了。
style.zIndex 来控制覆盖的先后顺序(层级)
style.filter ,style.opacity 控制显示透明°。
js控制父页面已经定义好的div显示:
js控制父页面div滚动居中:
attachEvent ,addEventListener 对scroll 添加处理事件 newDivCenter
动态给父页面div添加关闭图层和遮罩层(需要修改):
父页面:
<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);
相关文章推荐
- Js控制滑轮左右滑动实例
- js控制页面控件隐藏显示的两种方法介绍
- 权限控制框架Shiro简单介绍及配置实例
- Linux Shell 流程控制语句实例及自定义函数介绍
- [js实例] js控制audio背景音乐
- JS控制图形左右晃动的实例代码
- js形成页面的一种遮罩效果实例代码
- 一个js控制的导航菜单实例代码
- 原生JS实例练习——控制div属性—— JS学习笔记2015-8-4(第93天)
- js控制不同的时间段显示不同的css样式的实例代码
- HTML5 audio标签使用js进行播放控制实例
- JS时间控制实现动态效果的实例讲解
- 网页图片延迟加载LazyLoad.js使用方法介绍和实例
- js控制页面控件隐藏显示的两种方法介绍
- HTML5 audio标签使用js进行播放控制实例
- HTML5的自定义属性data-*详细介绍和JS操作实例
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- js 弹出对话框(遮罩)透明,可拖动的简单实例