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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
javascript不可用的问题探究
Oct 01 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
layui添加动态菜单与选项卡
Jul 26 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
javascript 闭包详解
2015/07/02 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
pyside写ui界面入门示例
2014/01/22 Python
分享Python字符串关键点
2015/12/13 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python实现八大排序算法
2016/08/13 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python 闭包的使用方法
2017/09/07 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
客户表扬信范文
2014/01/10 职场文书
党风廉政承诺书
2014/03/27 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
运动会广播稿100字
2015/08/19 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技