在开发平台中使用到遮罩层。需求如下:1.提示浮层在窗口滚动条滚动下保持在一个固定的位置。2.提示浮层在窗口改变大小的时候保持遮罩整个可见页面。

请提供一个兼容主流浏览器、封装好和调用简便的js代码。

2011-01-03 13:24:51

5 Answers

可以用jquery,也可以直接写,生成一个全页面长宽的div层,再在上面通过iframe或者ajax调用相应的页面就行,我给一个兼容性还算可以的吧,对话框是通过iframe加载页面来实现:

var js = document.getElementsByTagName('script'); var jspath = js[js.length-1].src.substring(0,js[js.length-1].src.lastIndexOf("/")+1);//自动获取js的路径 var iframediv = { id:Math.random(), show:function(file,param){ var p = document.createElement('DIV'); p.id=this.id; var scrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth; var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; p.style.cssText = "z-index:999999;width:"+scrollWidth+"px;height:"+scrollHeight+"px;position:absolute;left:0;top:0;background-color:#666;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;"; document.body.appendChild(p); var p1=document.createElement("DIV"); p1.id="box"+this.id; p1.style.cssText = "z-index:9999999;width:600px;position:absolute;top:0;left:50%;margin-left:-300px;background-color:#666;"; document.body.appendChild(p1); p1.innerHTML = '<iframe width="600" height="490" marginWidth=0 marginHeight=0 frameBorder=0 width="100%" scrolling="no" allowTransparency="true" src="XXXX"></iframe><a style="position:absolute;left:123px;top:10px;height:40px;width:40px;background-color:#ffffff; filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" href="javascript:closeIframediv()" title="close"> </a>'; this.iframescroll(); }, iframescroll:function(){ if(!document.getElementById("box"+this.id) ) return; var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("box"+this.id).style.top = parseInt(clientHeight*0.08) + parseInt(scrollTop)+"px"; }, close:function(){ document.body.removeChild(document.getElementById("box"+this.id)); document.body.removeChild(document.getElementById(this.id)); } } if( window.addEventListener){ window.addEventListener('scroll',function(){ iframediv.iframescroll(); },false); }else if(window.attachEvent){ window.attachEvent('onscroll',function(){ iframediv.iframescroll(); }); } window.closeIframediv = function(){ iframediv.close(); }; window.showDiv = function(param){ iframediv.show('login',param); };

封装成js文件后,直接调用showDiv();即可

2011-01-03 15:46:36

我这里有个基于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="Content-Type" content="text/html; charset=utf-8" /> <title>基于JQuery的JS遮罩层效果</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$("body").height(); var bW=$("body").width()+16; var objWH=getObjWh(ct); $("#fullbg").css({width:bW,height:bH,display:"block"}); var tbT=objWH.split("|")[0]+"px"; var tbL=objWH.split("|")[1]+"px"; $("#"+ct).css({top:tbT,left:tbL,display:"block"}); $("#"+content).html("<div style='text-align:center'>正在加载,请稍后...</div>"); $(window).scroll(function(){resetBg()}); $(window).resize(function(){resetBg()}); } function getObjWh(obj){ var st=document.documentElement.scrollTop;//滚动条距顶部的距离 var sl=document.documentElement.scrollLeft;//滚动条距左边的距离 var ch=document.documentElement.clientHeight;//屏幕的高度 var cw=document.documentElement.clientWidth;//屏幕的宽度 var objH=$("#"+obj).height();//浮动对象的高度 var objW=$("#"+obj).width();//浮动对象的宽度 var objT=Number(st)+(Number(ch)-Number(objH))/2; var objL=Number(sl)+(Number(cw)-Number(objW))/2; return objT+"|"+objL; } function resetBg(){ var fullbg=$("#fullbg").css("display"); if(fullbg=="block"){ var bH2=$("body").height(); var bW2=$("body").width()+16; $("#fullbg").css({width:bW2,height:bH2}); var objV=getObjWh("dialog"); var tbT=objV.split("|")[0]+"px"; var tbL=objV.split("|")[1]+"px"; $("#dialog").css({top:tbT,left:tbL}); } } //关闭灰色JS遮罩层和操作窗口 function closeBg(){ $("#fullbg").css("display","none"); $("#dialog").css("display","none"); } </script> <style type="text/css"> * { font-family:Arial, Helvetica, sans-serif; font-size:12px; } #fullbg { background-color: Gray; display:none; z-index:3; position:absolute; left:0px; top:0px; filter:Alpha(Opacity=30); /* IE */ -moz-opacity:0.4; /* Moz + FF */ opacity: 0.4; } #dialog { position:absolute; width:200px; height:200px; background:#F00; display: none; z-index: 5; } #main { height: 1500px; } </style> </head> <body> <div id="main"> <a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> </div> <!-- JS遮罩层 --> <div id="fullbg"></div> <!-- end JS遮罩层 --> <!-- 对话框 --> <div id="dialog"> <div id="dialog_content"></div> <div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div> </div> <!-- JS遮罩层上方的对话框 --> </body> </html>

2011-01-03 17:23:41

说个最简答的方法吧:
用jquery的blockUI插件,就会直接生成一个浮层。
一个简单的例子

<script type="text/javascript" src="<%=basePath %>/js/jquery-1.3.1.min.js"></script> <script language="javascript" src="<%=basePath %>/js/jquery.blockUI.js"></script> considerCallback = function(url){ var html = ""; html+='<div style="width:300px;">'; //html+='<h3>'; html+='<img src="'+url+'/images/goBar.gif" border="0" style="margin-left: -48px;" width="230px;" height="20px;">'; html+='<div class="pop_info_cue">'; html+='<div class="mat">'; html+='<font color="green">正在提交,请稍后。</font>'; html+='</div>'; html+='</div>'; html+='</div>'; $.blockUI(html); }

2011-01-03 18:14:29
<!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="Content-Type" content="text/html; charset=utf-8" /> <title>史上最精简,最强大的JS遮罩层效果,支持ie firefox jQuery遮罩层</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$("body").height(); var bW=$("body").width()+16; var objWH=getObjWh(ct); $("#fullbg").css({width:bW,height:bH,display:"block"}); var tbT=objWH.split("|")[0]+"px"; var tbL=objWH.split("|")[1]+"px"; $("#"+ct).css({top:tbT,left:tbL,display:"block"}); $("#"+content).html("<div style='text-align:center'>正在加载,请稍后...</div>"); $(window).scroll(function(){resetBg()}); $(window).resize(function(){resetBg()}); } function getObjWh(obj){ var st=document.documentElement.scrollTop;//滚动条距顶部的距离 var sl=document.documentElement.scrollLeft;//滚动条距左边的距离 var ch=document.documentElement.clientHeight;//屏幕的高度 var cw=document.documentElement.clientWidth;//屏幕的宽度 var objH=$("#"+obj).height();//浮动对象的高度 var objW=$("#"+obj).width();//浮动对象的宽度 var objT=Number(st)+(Number(ch)-Number(objH))/2; var objL=Number(sl)+(Number(cw)-Number(objW))/2; return objT+"|"+objL; } function resetBg(){ var fullbg=$("#fullbg").css("display"); if(fullbg=="block"){ var bH2=$("body").height(); var bW2=$("body").width()+16; $("#fullbg").css({width:bW2,height:bH2}); var objV=getObjWh("dialog"); var tbT=objV.split("|")[0]+"px"; var tbL=objV.split("|")[1]+"px"; $("#dialog").css({top:tbT,left:tbL}); } } //关闭灰色JS遮罩层和操作窗口 function closeBg(){ $("#fullbg").css("display","none"); $("#dialog").css("display","none"); } </script> <style type="text/css"> { font-family:Arial, Helvetica, sans-serif; font-size:12px; } #fullbg{ background-color: Gray; display:none; z-index:3; position:absolute; left:0px; top:0px; filter:Alpha(Opacity=30); / IE / -moz-opacity:0.4; / Moz + FF */ opacity: 0.4; } #dialog { position:absolute; width:200px; height:200px; background:#F00; display: none; z-index: 5; } #main { height: 1500px; } </style> </head> <body> <div id="main"> <a href="#rhis" onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a> </div> <!-- JS遮罩层 --> <div id="fullbg"></div> <!-- end JS遮罩层 --> <!-- 对话框 --> <div id="dialog"> <div id="dialog_content"></div> <div style="text-align: center;"><a href="#" onclick="closeBg();">关闭</a></div> </div> <!-- JS遮罩层上方的对话框 --> </body> </html>
2011-01-03 20:19:52

最简单的方法是用div层,使其高度与宽与当前文档一样就可以,设置它的z-index大于页面所有层的z-index,然后你在设置一个你想在层上面的层,设置它的z-index大于遮蔽层的z-index就行了

2011-01-03 22:01:26
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制