弹出层背景变暗之极限学习

弹出层变暗哥们研究了半天,也学习了“仿网易弹出窗口背景变暗”,在学习过程中发现了一些问题,最简单的测试方法是让网页成为符合W3C的形式,就很难实现。而且需要把JS代码放在Body中。那么怎样实现比较完善的效果呢?(当然比较丑陋,但思路比较清晰~)

一、思路:

设计两个层,一个是中间层,第二个是显示层。中间层实现背景变暗,显示层用来显示内容。需要注意的是中间层和实现层的定位都应该是absolute。

二、代码:

html代码:

‍<!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=gb2312">
<title>弹出层测试</title>
<style type="text/css">
#popwin{display:none;background:#ccc;top:0px;left:0px;position:absolute;filter:alpha(opacity=90);opacity:0.9;z-index:2;}
table{border-collapse:collapse;}
td{border:1px solid #f00;}
#showwin{display:none;position:absolute;background:#fe0;}
#close{padding:1px;float:right;position:relative;border-bottom:1px solid #000;}
</style>
<script src="js/mypop.js"></script>
</head>

<body>
<a href="#" onClick="myopen()">测试</a>
<div id="popwin"></div>
<div id="showwin">
<div id="close"><img src="images/close.gif" onClick="Close();"></div>
<form name="form1" method="post" action="">
<table width="400" border="0" cellspacing="0" cellpadding="5">
    <tr> 
    <td>用户名:</td>
    <td>
        <input type="text" name="textfield">
      </td>
</tr>
<tr> 
    <td>密码:</td>
    <td><input type="text" name="textfield2"></td>
</tr>
    <tr align="center"> 
      <td colspan="2"> 
        <input type="submit" name="Submit" value="提交">
      </td>
</tr>
</table>
</form>
</div>
</body>
</html>

 

JS代码:

var body=document.compatMode=="CSS1Compat"?document.documentElement:document.body;
var winwidth=400;
var winheight=300;
document.getViewHeight = function(){
if (window.innerHeight!=window.undefined) return window.innerHeight;
if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight; 
return window.undefined; 
}
//得到浏览器显示的屏幕宽度
document.getViewWidth = function(){
if (window.innerWidth!=window.undefined) return window.innerWidth; 
if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; 
if (document.body) return document.body.clientWidth; 
return window.undefined; 
}
function $(Id) { return document.getElementById(Id); }
function center(win)//将主窗口置于网页正中
{
var s = win.style;
s.left = (document.getViewWidth()-winwidth)/2+"px";
s.top = (document.getViewHeight()-winheight)/2+"px";
}


function myopen(){
with(body.style)
{
   width=document.getViewWidth()+"px";
   height=document.getViewHeight()+"px";
}
with($("popwin").style)
{
   width=document.getViewWidth()+"px";
   height=document.getViewHeight()+"px";
   display="block";
   zIndex=2;
   overflow="hidden";
}
with($("showwin").style)
{
   zIndex=3;
   display="block";
   overflow="hidden";
   width=winwidth+"px";
   height=winheight+"px";
}
center($("showwin"));
}
function Close()
{
$("popwin").style.display="none";
$("showwin").style.display="none";
}

 

三、说明:

winwidth,winheight可以设置成你需要的宽和高。可以直接在Html中修改显示内容,避免了在JS中恐怖的引号,样式修改方便,在IE6.0及FF3.6中测试没问题。(其它未做测试,应该没问题)

你可能感兴趣的:(html,css,浏览器,XHTML)