教程集 > 脚本编程 > javascript > 正文兼容IE，FF弹出遮盖拖动层

兼容IE，FF弹出遮盖拖动层

发布时间：2017-01-18 编辑：jiaochengji.com

教程集为您提供兼容IE，FF弹出遮盖拖动层等资源，欢迎您收藏本站，我们将为您提供最新的兼容IE，FF弹出遮盖拖动层资源

遮盖层根据页面内容的高度来获取，而不是可见页面的获取，另外既然有了滚动条，为了弹出的层不至于跑浏览器上面看不见的缺点，将移动滚动条的时候层也跟着滚动条一起滚动，根据页面放大缩小自动地位在原来大小的比例自动定位

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><style> #main {width:250px;heigth:300px;position:absolute;z-index:10;border:1px solid #d6d6d6;display:none;} #main .T {width:250px;height:auto;background:green;} #main .T .T_1 {float:left;width:232px;line-height:20px;cursor:move;color:#FFF;font-weight:bold;font-family:verdana;font-size:12px;} #main .T .T_2 {float:left;width:18px;line-height:20px;background:blue;color:#FFF;font-weight:bold;font-family:verdana;font-size:9pt;text-align:center;cursor:pointer;} #main .content {width:250px;height:100px;background:#fff;} </style> <script> function $(id){return document.getElementById(id);} function abc(){ document.documentElement.scroll =true; $("main").style.display="inline"; $("main").style.top = (document.body.clientHeight - $("main").offsetHeight)/2 "px"; $("main").style.left = (document.body.clientWidth - $("main").offsetWidth)/2 "px"; $("main").onmousedown=Function("Drag(this)"); //拖动层 //背景层 var shield=document.createElement("div"); shield.id="shield"; shield.style.cssText="position:absolute;z-index:1;background:#000;filter:alpha(opacity=30);opacity:0.3;top:0;left:0;"; shield.style.width=document.body.scrollWidth "px"; var AH=document.body.scrollHeight; var BH=document.body.clientHeight; if(AH<BH){shield.style.height=BH "px";}else{shield.style.height=AH "px";} document.body.appendChild(shield); onresize=function(){ if(document.body.scrollHeight==document.body.clientHeight){ if(document.body.scrollHeight>document.body.clientHeight){ $("shield").style.height=document.body.clientHeight "px"; }else{ $("shield").style.height=document.body.scrollHeight "px"; } }else{ $("shield").style.height=document.body.scrollHeight "px"; } $("shield").style.width=document.body.clientWidth "px"; $("main").style.left= document.body.scrollLeft (document.body.clientWidth-$("main").offsetWidth)/2 "px"; $("main").style.top= document.body.scrollTop (document.body.clientHeight-$("main").offsetHeight)/2 "px"; } onscroll=function(){$("main").style.top= document.body.scrollTop (document.body.clientHeight-$("main").offsetHeight)/2 "px";} } function hidden(){ if($("main")){$("main").style.display="none";} if($("shield")){document.body.removeChild($("shield"));} } function Drag(str){ var e=window.event || arguments.callee.caller.arguments[0]; var deltaX=e.clientX-str.offsetLeft; var deltaY=e.clientY-str.offsetTop; var deltaH=document.body.scrollHeight; var deltaW=document.body.scrollWidth; var drag=true; str.onmousemove=function(ev){ ev=ev?ev:window.event; if(drag){ var Y=ev.clientY-deltaY; var X=ev.clientX-deltaX; var H=deltaH-str.offsetHeight; var W=deltaW-str.offsetWidth; if(Y>0 || X>0){ if(Y>=H){str.style.top=H "px";}else{str.style.top=Y "px";} if(X>=W){str.style.left=W "px";}else{str.style.left=X "px";} } if(Y<=0){str.style.top=0;} if(X<=0){str.style.left=0;} str.setCapture(); }} str.onmouseup=function(){drag=false;str.releaseCapture();} } </script> <button onclick="abc()">弹层</button>

鼠标放这里拖动

</textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
兼容IE，FF弹出遮盖拖动层
 JS遮罩层效果(兼容ie firefox) jQuery遮罩层实例
 js实现拖动层，兼容IEFireFox
JS遮罩层效果兼容ie firefox jQuery遮罩层
 兼容IE FF 浮动层实现方法
 jQuery 页面 Mask实现代码
 Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
 基于jquery的弹窗插件 weebox
jquery 遮罩层效果实现的导航菜单
 jQuery遮罩层插件 Simple Overlay

上一篇：javascript用户注册提示效果下一篇：简单的js图片幻灯效果

[关闭]

兼容IE，FF弹出遮盖拖动层

最近更新

浏览排行