js控制的遮罩层实例介绍

 更新时间:2013年05月29日 18:16:18   作者:   我要评论

把项目里很土的弹窗,改成了遮罩层显示,现在感觉好多了。在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了,具体实现祥看本文,希望可以帮助到你
闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了。上代码:
父页面:
复制代码 代码如下:

<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);

相关文章

  • Iframe 自动适应页面的高度示例代码

    Iframe 自动适应页面的高度示例代码

    这篇文章主要介绍了Iframe如何自动适应页面的高度,需要的朋友可以参考下
    2014-02-02
  • javascript比较文档位置

    javascript比较文档位置

    一个很棒的 blog 文章,是 PPK 两年前写的,文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们。在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器)。
    2008-04-04
  • js与applet相互调用的方法

    js与applet相互调用的方法

    这篇文章主要介绍了js与applet相互调用的方法,结合实例形式分析了js调用java的applet以及java调用js的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript获取网页中第一个链接ID的方法

    JavaScript获取网页中第一个链接ID的方法

    这篇文章主要介绍了JavaScript获取网页中第一个链接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以参考下
    2015-04-04
  • JavaScript网页定位详解

    JavaScript网页定位详解

    本篇文章主要是对JavaScript网页定位进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 解决微信二次分享不显示摘要和图片的问题

    解决微信二次分享不显示摘要和图片的问题

    下面小编就为大家带来一篇解决微信二次分享不显示摘要和图片的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS实现的数组去除重复数据算法小结

    JS实现的数组去除重复数据算法小结

    这篇文章主要介绍了JS实现的数组去除重复数据算法,总结分析了4种比较常见的数组去重复算法及相关使用技巧,需要的朋友可以参考下
    2017-11-11
  • 纯js和css完成贪吃蛇小游戏demo

    纯js和css完成贪吃蛇小游戏demo

    这篇文章主要为大家详细介绍了纯js和css完成贪吃蛇小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JavaScript实现将文本框的值插入指定位置的方法

    JavaScript实现将文本框的值插入指定位置的方法

    这篇文章主要介绍了JavaScript实现将文本框的值插入指定位置的方法,涉及javascript节点添加操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js编写“贪吃蛇”的小游戏

    js编写“贪吃蛇”的小游戏

    本文为大家介绍的是使用JS写的贪吃蛇游戏,个人练习之用,感兴趣的朋友可以参考下哈,希望对大家学习js有所帮助
    2015-12-12

最新评论