一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。
clientHeight
在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下，offsetHeight也是浏览器可视区域的高（包括边线）
在FF下，offsetHeight是页面具体内容的高度
scrollHeight
在IE下，scrollHeight 是页面具体内容的高度，可以小于clientHeight
在FF下，scrollHeight 是网页内容高度，不过最小值是clientHeight
二、下面是跨浏览器取得当前页面的高度的解决方法。
复制代码 代码如下:
function getPageSize()
{
var body = document.documentElement；
var bodyOffsetWidth = 0
var bodyOffsetHeight = 0
var bodyScrollWidth = 0
var bodyScrollHeight = 0
var pageDimensions = [0,0]
pageDimensions[0]=body.clientHeight
pageDimensions[1]=body.clientWidth
bodyOffsetWidth=body.offsetWidth
bodyOffsetHeight=body.offsetHeight
bodyScrollWidth=body.scrollWidth
bodyScrollHeight=body.scrollHeight
if(bodyOffsetHeight >pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight
}
if(bodyOffsetWidth >pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth
}
if(bodyScrollHeight >pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight
}
if(bodyScrollWidth >pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth
}
return pageDimensions
}
三、页面上必须放置一个div，作为遮罩层，下面是这个遮罩层的css样式。
复制代码 代码如下:
.lockDiv
{
position:absolute
left:0
top:0
height:0
width:0
border:2 solid red
display:none
text-align:center
background-color:#DBDBDB
filter:Alpha(opacity=60)
}
四、在客户端使用下面的javascript用遮罩层将整个页面封闭。
复制代码 代码如下:
var sandglassSpan = 1
var timeHdl
function DisablePage()
{
var ctrlSandglass = document.getElementById("divSandglass")
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl)
ctrlSandglass.style.display = "none"
document.body.style.cursor = 'auto'
sandglassSpan = 1
}
else
{
document.body.style.cursor = 'wait'
var pageDimensions = getPageSize()
ctrlSandglass.style.top = 0
ctrlSandglass.style.left = 0
ctrlSandglass.style.height = pageDimensions[0]
ctrlSandglass.style.width = pageDimensions[1]
ctrlSandglass.style.display = "block"
timeHdl = window.setTimeout(DisablePage,200)
}
}
五、如果页面上使用了ASP.net的Validator控件，那么应该使用如下的javascript。
复制代码 代码如下:
var sandglassSpan = 1
var timeHdl
function DisablePageHaveValidator()
{
var ctrlSandglass = document.getElementById("divSandglass")
if(false == Page_IsValid)
{
sandglassSpan = 0
}
if(sandglassSpan==0)
{
window.clearTimeout(timeHdl)
ctrlSandglass.style.display = "none"
document.body.style.cursor = 'auto'
sandglassSpan = 1
}
else
{
document.body.style.cursor = 'wait'
ctrlSandglass.style.display = "block"
var pageDimensions = getPageSize()
ctrlSandglass.style.top = 0
ctrlSandglass.style.left = 0
ctrlSandglass.style.height = pageDimensions[0]
ctrlSandglass.style.width = pageDimensions[1]
timeHdl = window.setTimeout(DisablePageHaveValidator, 200)
}
}
不是很明白你要的是什么效果，既然是导航，本来z-index就会高于内容，不会影响误操作到内容，没必要做遮罩层。鼠标放到哪，哪模糊，用a:hover实现就行了，你如果要遮罩整个界面而不只是导航下面那部分，那做一个遮罩层就行了，做成半透明，控制他的display在none和block之间变换，绑定移入移出事件给导航的各个元素。完美的封装了popUpBox这个类
这个类一共两个公开方法
show 显示
hidden 隐藏
其他功能请自行扩展
不敢保证简单，但每一行都写了注释
<!DOCTYPE html><html>
<head>
<title>CSS 点击文字或按钮打开div浮动层 </title>
<meta charset="UTF-8" />
</head>
<script>
function popUpBox(){ //创建盒子类
this.init = function(){ //初始化函数
var onloadFunc = window.onload, //将window.onload事件执行的函数保存到onloadFunc
subInit = function(o){ //需要等结构加载完成执行的函数
document.body.appendChild(o.mask) //将遮罩添加到body
document.body.appendChild(o.box) //将盒子添加到body
},
createElement = function(){ //创建元素函数，共同的样式在这里已经设置
var e = document.createElement('div') //创建一个div
e.style.position = 'fixed' //设置定位方式为跟随浏览器移动
e.style.left = '0px' //元素x轴位置
e.style.top = '0px' //元素y轴位置
e.style.zIndex = '2000' //元素z轴位置
e.style.width = window.innerWidth + 'px' //元素宽度
e.style.height = window.innerHeight + 'px' //元素高度
e.style.margin = '0px' //元素的外边距
e.style.padding = '0px' //元素的内边距
e.style.backgroundColor = 'rgba(0, 0, 0, 0.3)' //元素的背景颜色
return e //返回这个元素
}
this.mask = createElement() //创建遮罩
this.mask.onclick = (function(o){ //创建匿名函数 参数一 传入需要操作的对象
return function(){ //匿名函数返回为遮罩绑定鼠标点击事件执行函数
o.hidden() //为o这个对象执行隐藏函数
}
})(this) //立即执行匿名函数 并传入当前对象
this.box = createElement() //盒子
this.box.style.left = window.innerWidth / 2 + 'px' //设置盒子水平居中
this.box.style.top = window.innerHeight / 2 + 'px' //设置盒子垂直居中
this.box.style.width = '400px' //设置盒子宽度
this.box.style.height = '300px' //设置盒子高度
this.box.style.border = '1px solid #3399ff' //设置边框
this.box.style.borderRadius = '5px' //设置圆的边框
this.box.style.zIndex = '2001' //设置盒子的z轴
this.box.style.backgroundColor = '#FFF' //设置盒子的背景颜色
this.box.style.transform = 'translate(-50%, -50%)' //执行2d动画，把这个盒子位置向反方向移动50%
this.box.innerHTML = '在这里设置盒子的内容，关闭盒子调用实例的hidden()函数即可，如这个实例想这样 loginBox.hidden()//就可以隐藏 '
this.hidden() //隐藏遮罩和盒子
window.onload = (function(o){ //创建匿名函数 参数一 要操作的对象
return function(){ //返回onload事件执行的函数
if(typeof onloadFunc == 'function'){ //判断onloadFunc中有没有函数，防止覆盖其他功能的执行事件
onloadFunc() //执行已经绑定的函数
}
subInit(o) //执行初始化需要执行的函数
}
})(this) //立即执行匿名函数 并传入当前对象
}
this.show = function(){ //显示
this.mask.style.display = 'block'
this.box.style.display = 'block'
}
this.hidden = function(){ //隐藏
this.mask.style.display = 'none'
this.box.style.display = 'none'
}
this.init() //调用初始化函数
}
var loginBox = new popUpBox() //创建一个实例，可以创建N个，互相不干扰
</script>
<body>
<a href="#" onclick="loginBox.show()">弹出盒子</a>
</body>
</html>
