`

js 遮罩层(支持ie,ff)

    博客分类：
  • js
IECSSF#jQueryJavaScript 
阅读更多

因业务需要，写个js遮罩层..本来想直接用jquery中的dialog方法，但发现不是很好看；

后来在网上搜索找到一个比较适合自己的.下面是代码.

<!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遮罩层效果，支持iefirefoxjQuery遮罩层</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//显示灰色JS遮罩层
function showBg(ct,content){
//var bH=$("body").height();这个是原创的js,都发现有时不行，取不到真正
//高度。所以我就换了下面的方法
var bH=document.documentElement.clientHeight;
var bW=$("body").width()+16;
var objWH=getObjWh(ct);
alert(bW);
alert(bH);
$("#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"});
$(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">

#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;
display:none;
z-index:5;
}

 
</style>
</head>
<body>
<div id="main">
<a href="#rhis"onclick="showBg('dialog','dialog_content');">点击这里看JS遮罩层效果</a>

adsfasdfasdf

asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>

asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf<br>
asdf
asd
f
as
df
asdf<br>
asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>asdf<br>
asdf
asd
f
as
df
asdf<br>
</div>
<!--JS遮罩层-->
<div id="fullbg"></div>
<!--endJS遮罩层-->
<!--对话框-->
<div id="dialog">
<div id="dialog_content"><img src="loadingAnimation.gif"/><!--加载的图片 -->
 <br/><div align='center'>加载中....请稍等</div></div>
<div style="text-align:center;"><a href="#"onclick="closeBg();">关闭</a></div>
</div>
<!--JS遮罩层上方的对话框-->
</body>
</html>

 

分享到：
| 如何远程登录计算机
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    超级爽的 js 遮罩层 谦容 FF IE 支持拖动...

    标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动"意味着我们找到了一个高效且具有良好用户体验的解决方案，它不仅能在多种浏览器上运行，还支持用户对遮罩层进行拖动操作。下面将详细介绍这个知识点。 首先，遮罩...

    遮罩层提示框，可拖动（兼容IE、FF与谷歌）

    JS遮罩层，可拖动（兼容IE、FF与谷歌）

    遮罩层效果（最新），简单易用

    描述中提到"兼容IE\FF\google等主流浏览器"，这意味着这个遮罩层解决方案经过优化，可以在Internet Explorer、Firefox和Chrome这些广泛使用的浏览器上正常工作。对于开发者来说，跨浏览器兼容性是至关重要的，因为...

    JQuery遮罩层登录界面源码

    测试浏览器：IE8、FF3.6.8、Google Chrome （IE8中弹出登录层后会出现竖拉条，其他两种没有出现，那个竖拉条可以在JS中通过修改数值让其不出现，但是下面会出现白边） 点击登录显示登录窗口（层） ，同时用一个灰色...

    javascript div 遮罩层封锁整个页面

    通过JavaScript动态控制遮罩层的显示与隐藏，以及根据页面尺寸调整遮罩层的位置，可以实现封锁整个页面。示例中的JavaScript代码片段展示了如何操作遮罩层，包括设置其位置、显示和隐藏等。 1. **显示遮罩层**：...

    兼容FF，IE等浏览器的弹出层教程

    6.是否显示遮罩层 7.遮罩层颜色设置 8.遮罩层透明度设置 9.窗口层叠顺序设置，以实现多级弹出 10.是否显示窗体阴影 11.定时关闭功能 12.自定义窗口大小 13.自定义窗口内容，支持HTML格式和jquery对象格式，不支持...

    兼容ie ff div 层 打开+关闭+ 拖动+遮罩+移动+动画改变高宽

    - 兼容性处理可能涉及对IE浏览器的特定行为进行调试，因为IE对CSS和JavaScript的支持与现代浏览器如Firefox存在差异。 2. JavaScript操作：文档中提到的各种操作（如打开、关闭、拖动、遮罩、移动、动画改变高宽）...

    JTooltips javascript 提示框

    详细解释 ：支持2个属性color以及opacityTO，color为遮罩层的背景颜色，默认情况为black，opacityTO为遮罩层最终透明度，如果配置一个红色，最终透明度为0.5的 配置属性为dropsheet:{color:'#f00',opacityTO:0.5} ...

    百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    遮罩层可以在IE6、7、8下全屏，但在Firefox和Chrome下无法全屏遮罩。这是因为遮罩层的样式被设置为height:100%，而在有&lt;!DOCTYPE&gt;声明的页面中，这种方法无法与Firefox和Chrome兼容。通过研究网上流传的“luocheng”...

    jquery弹出层

    jQuery弹出层，通常被称为模态对话框或浮动窗口，是在网页主界面之上显示一个半透明或全透明的遮罩层，以及一个独立的窗口，用于展示详细信息、警告提示、表单输入等。这种设计可以避免用户在处理当前任务时被其他...

    显示div层js.txt

    此脚本通过修改HTML元素的样式属性来显示和隐藏一个背景遮罩层（`divBackground`）以及一个显示层（`divShow`）。此外，还提供了一些额外的功能，比如定时关闭弹窗、动态调整位置等。 #### 二、关键函数及代码段...

    jquery blockUI 遮罩不能消失与不能提交的解决方法

    代码如下: //显示遮罩 $.blockUI({ message: $(‘#divlogin’), css:{width:”400px”, height:”255px”, top: ($(window).height() – 400) /2 + ... 在FF3.0.4，Chrome下都没问题，只是 IE6 IE7 Ie8下不正常。 打开

    js的alert样式如何更改如背景颜色

    3. **透明度处理**：在IE浏览器下，使用`filter: alpha(opacity=0)`为遮罩层设置透明度，但此属性已被废弃，现代浏览器更推荐使用CSS3的`opacity`属性。 4. **HTML内容动态插入**：在`alertFram`中动态生成HTML，...

    基于JQuery的弹出插件

    2 兼容 IE7+ ff google 3 功能： 1）弹层遮罩 2）弹出层位置 top/parent 3）弹出层大小 4）是否可拖动 5）是否最大/小化 6）是否可关闭 7）确认、取消提示框 8）弹出层标题自定义 9）弹出层嵌入页面 10）...

    jquery blockUI Version 2.39

    // suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity) applyPlatformOpacityRules: true, // callback method invoked when unblocking has completed; the ...

Magicbox
Global site tag (gtag.js) - Google Analytics