脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 遮罩层

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);
您可能感兴趣的文章:

相关文章

  • JS数组中filter方法的使用实例

    JS数组中filter方法的使用实例

    在数组的使用中我们通常会有数组的过滤的需求,比如值在某个范围内的数字,用来组成一个新的数组,这就用到了数组的过滤,下面这篇文章主要给大家介绍了关于JS数组中filter方法使用的相关资料,需要的朋友可以参考下
    2022-07-07
  • 渐变的Alert

    渐变的Alert

    渐变的Alert...
    2006-11-11
  • 原生javascript实现读写CSS样式的方法详解

    原生javascript实现读写CSS样式的方法详解

    最近学习中遇到这个问题，为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！下面这篇文章主要介绍了利用原生javascript实现读写CSS样式的方法,需要的朋友可以参考下。
    2017-02-02
  • 详解用async/await来处理异步

    详解用async/await来处理异步

    这篇文章主要介绍了详解用async/await来处理异步，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js实现登陆遮罩效果的方法

    js实现登陆遮罩效果的方法

    这篇文章主要介绍了js实现登陆遮罩效果的方法,涉及javascript操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Web 开发中Ajax的Session 超时处理方法

    Web 开发中Ajax的Session 超时处理方法

    下面小编就为大家带来一篇Web 开发中Ajax的Session 超时处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • JS密码生成与强度检测完整实例(附demo源码下载)

    JS密码生成与强度检测完整实例(附demo源码下载)

    这篇文章主要介绍了JS密码生成与强度检测完整实例,涉及JavaScript密码的生成,破解时间计算,密码安全监测及大小写锁定判断等功能的实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-04-04
  • 微信小程序常见页面跳转操作简单示例

    微信小程序常见页面跳转操作简单示例

    这篇文章主要介绍了微信小程序常见页面跳转操作,结合简单实例形式总结分析了微信小程序保留页面跳转、关闭页面跳转、返回上一级页面等各种常见的跳转操作实现技巧,需要的朋友可以参考下
    2019-05-05
  • 关于JS中的全等和不全等、等于和不等于问题

    关于JS中的全等和不全等、等于和不等于问题

    等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。接下来通过本文给大家介绍JS中的全等和不全等、等于和不等于，一起看看吧
    2021-09-09
  • 原生js实现商品筛选功能

    原生js实现商品筛选功能

    这篇文章主要为大家详细介绍了原生js实现商品筛选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论