css+javascript实现透明浮动层的覆盖

最新推荐文章于 2022-07-05 23:46:45 发布

FG2006

最新推荐文章于 2022-07-05 23:46:45 发布

阅读量2k

点赞数

分类专栏： javascript 文章标签： javascript css function firefox button filter

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近在网上看到一个css+javascript实现透明浮动层的覆盖的例子，发觉按照他的方法有一点小bug，因此改了一下，现在没有问题了~~如果这代码你是原作人，原谅我修改了你的代码，大家都是为了学习而交流~~
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> </title>
<style type="text/css">
#LockWindows{
position:absolute; top:10px; left:10px; background-color:#777777; z-index:2; display:none;
/* Moz Family使用私有属性-moz-opacity: 0.70 */
/* IE 使用私有属性filter */
/* 标准属性opacity支持CSS3的浏览器（FF 1.5也支持）*/
opacity: 0.70;
filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=100);
width:expression(documentElement.clientWidth < 900?(documentElement.clientWidth==0?(body.clientWidth <900?'900':'auto'):'900px'):'auto');
}
#WindowDIV{position:absolute; z-index:3; background-color:#FFFFFF; border:#000000 solid 1px; display:none;}
</style>
<script type="text/javascript">
//隐藏下拉框，以解决下拉框优先度太高的问题，
function _displaySelect(){
var selects=document.getElementsByTagName("select");[color=#99CC00]//整个页面的所有下拉框
var objWindow = document.getElementById("WindowDIV");
var DIVselects = objWindow.getElementsByTagName("select"); //整个弹出层的所有下拉框
for(var i=0;i <selects.length;i++){
if(selects[i].style.visibility){
selects[i].style.visibility="";
}else{
selects[i].style.visibility="hidden";
for(var j=0; i <DIVselects.length; j++){
DIVselects[j].style.visibility="";
}
}
}
}
这里我个人认为可以不用的~~

[/color]
function openWindows(width,height){
var objWindow = document.getElementById("WindowDIV");
var objLock = document.getElementById("LockWindows"); //这个是用于在IE下屏蔽内容用
objLock.style.display="block";
objLock.style.width=document.body.clientWidth+"px";
objLock.style.height=document.body.clientHeight+"px";
objLock.style.minWidth=document.body.clientWidth+"px";
objLock.style.minHeight=document.body.clientHeight+"px";
// 判断输入的宽度和高度是否大于当前浏览器的宽度和高度
if(width > document.body.clientWidth)
width = document.body.clientWidth;
if(height > document.body.clientHeight)
height = document.body.clientHeight;
objWindow.style.display="block";
objWindow.style.width = width+"px";
objWindow.style.height = height+"px";
// 将弹出层居中
objWindow.style.left=(document.body.offsetWidth - width)/2+" px";
objWindow.style.top=(document.body.offsetHeight - height)/2+" px";
//_displaySelect();
}
function hiddenWindows(){
LockWindows.style.display='none';
WindowDIV.style.display='none';
// _displaySelect();
}
</script>
</head>

<body>
<div id="LockWindows"> <br>
<div id="WindowDIV" align="center">
<input type="button" οnclick="hiddenWindows();" value="关闭" / >
</div>
</div>
<input type="button" οnclick="openWindows('800','700');" value="编辑" >
<br>

<a href="http://www.google.com">abc </a>

</body>

</html>

注：Firefox也可以用，但没有居中效果，如果你知道如何在Firefox中也实现居中的话请指教。谢谢！