|
锁定老帖子 主题：JQuery遮罩层
精华帖 (0) :: 良好帖 (0) :: 新手帖 (9) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-21
呵呵，是啊，我就是随意写写！
|
| 返回顶楼 | |
|
发表时间：2011-04-22
也可参考下这个：
<!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=gbk" /> <title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title> <script type="text/javascript" src="C:\Documents and Settings\Administrator\桌面\test\jQuery\jquery-1.5.2.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-04-22
谢谢大家的建议！
|
| 返回顶楼 | |
|
发表时间：2011-04-22
为什么我发的代码前面没有1、2、3、.... 各位朋友，你么发时，文字跟代码是单独发的吗？ qwert100 写道 也可参考下这个：
<!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=gbk" /> <title>史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层</title> <script type="text/javascript" src="C:\Documents and Settings\Administrator\桌面\test\jQuery\jquery-1.5.2.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-04-22
qwert100 写道
为什么我发的代码前面没有1、2、3、.... 各位朋友，你么发时，文字跟代码是单独发的吗？ 点击“代码”，出现一个对话框，将代码复制到对话框中即可出现“1、2、3”。如图：
|
| 返回顶楼 | |
|
发表时间：2011-04-22
最后修改：2011-04-22
轻量级jquery遮罩插件：http://demo.cssor.com/jcover/
|
| 返回顶楼 | |
|
发表时间：2011-04-23
我对这截图表示很不淡定....年度幽默奖吧....JEER颁发的。..
|
| 返回顶楼 | |
|
发表时间：2011-04-23
哈哈哈哈哈哈哈哈！见笑啊！
|
| 返回顶楼 | |
|
发表时间：2011-04-24
截图很强大
|
| 返回顶楼 | |
