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 相关文章推荐
浅谈Javascript事件模拟
Jun 27 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 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
session 的生命周期是多长
2006/10/09 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
用js实现trim()的解决办法
2013/04/16 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Django中使用locals()函数的技巧
2015/07/16 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python针对excel的操作技巧
2018/03/13 Python
python+flask实现API的方法
2018/11/21 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python 多维List创建的问题小结
2019/01/18 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python压包的概念及实例详解
2021/02/17 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
大一期末自我鉴定
2013/12/13 职场文书
党员思想汇报范文
2013/12/30 职场文书
高一数学教学反思
2014/02/07 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
校友会致辞
2015/07/30 职场文书
护士工作心得体会
2016/01/25 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书