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


Posted in Javascript onJuly 26, 2010
<!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="jquery-1.3.2.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>
Javascript 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js Math 对象的方法
Sep 01 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
深入理解js 中async 函数的含义和用法
May 13 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 #Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 #Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 #Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 #Javascript
jQuery getJSON 处理json数据的代码
Jul 26 #Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 #Javascript
用jquery实现下拉菜单效果的代码
Jul 25 #Javascript
You might like
php在线打包程序源码
2008/07/27 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Angular2库初探
2017/03/01 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
Python实现单词拼写检查
2015/04/25 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
农村党支部先进事迹
2014/01/14 职场文书
答谢会策划方案
2014/05/12 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
给下属加薪申请报告
2015/05/15 职场文书
员工升职自我评价
2019/03/26 职场文书