js控制的遮罩层实例介绍

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


代码如下:

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

赞 (0)

相关推荐

  • js鼠标悬浮出现遮罩层的方法

    本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl">          <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008

  • javascript ImgBox透明遮罩层背景图片展示

    JavaScript Data Access Test function topDiv(el){ var elem=document.createElement("div"); elem.className="top-div"; //=========create img tag var img=document.createElement("img"); img.src=el.href; elem.appendChild(img); //===

  • 原生js实现半透明遮罩层效果具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 纯js实现遮罩层效果原理分析

    可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原理如下: * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: 复制代码 代码如下: <html>

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

  • JS实现遮罩层效果的简单实例

    复制代码 代码如下: function show(){ var cover = document.getElementById("cover"); cover.style.width = document.documentElement.scrollWidth+"px"; cover.style.height = document.documentElement.scrollHeight+"px"; cover.style.display = &

  • JavaScript编写点击查看大图的页面半透明遮罩层效果实例

    这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 通过遮罩层实现浮层DIV登录的js代码

    这个就没什么好说的了..直接上代码啊!! 首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框. 复制代码 代码如下: <body> <div id="shade"></div> <div> <a onclick="login()" style="cursor:pointer">登录</a> </div> <br/> 什么都没有用...&l

  • js css 实现遮罩层覆盖其他页面元素附图

    js css 实现遮罩层覆盖其他页面元素附图

    <div style=" position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div> z-index 必须大于遮罩元素 demo <!doctype html> <html> <head&g

  • javascript div 遮罩层封锁整个页面

    具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll

  • 弹出最简单的模式化遮罩层的js代码

    假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo

  • js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    用JS写出遮罩层登陆框和对联广告并自动跟随滚动条滚动保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • css+js实现部分区域高亮可编辑遮罩层

    css+js实现部分区域高亮可编辑遮罩层

    想大家都做过遮罩层这种常见的功能,css或jquery实现,实现方式多样化,这里http://我介绍我在项目中实现的方式,全屏遮罩,部分区域可操作,非常实用. 效果如下图:  js 实现部分: 复制代码 代码如下: <script type="text/javascript"> var myAlert = document.getElementById("alert"); var reg = document.getElementById("c

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

随机推荐