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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
iScroll.js 使用方法参考
May 16 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
腾讯与新浪的通过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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
js获取变量
2006/08/24 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
js 事件小结 表格区别
2007/08/13 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
React简单介绍
2017/05/24 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
详解Python使用tensorflow入门指南
2018/02/09 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
小学领导班子对照材料
2014/08/23 职场文书
房屋出售授权委托书
2014/10/12 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android