IceApple

ThickBox弹窗特效

July 26th 2008,02:16 PM 学习工作 thickbox 0 comments

本是在学习z-index，唯一一个没有数值单位
在两个div有交集的时候，通过控制z-index的值来确定层叠方式
但两个div均为position:absolute

示例如下

<!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" />
<link href="css.css" rel="stylesheet" type="text/css">
<title>http://www.iceapple.net</title>
<script type="text/javascript">
function $(ul)
{
  return document.getElementById(ul)
}//只定义一个方法，不找数据
function tt()
{
   $('mark').style.display='block';
}
//调用上面的方法，找到mark标签并赋给上面方法的参数
</script>
</head>
<body>
<div style="position:absolute;width:100px;height:100px;background:#666666;display:none;top:100px;left:100px;z-index:101;" id="mark">内容区域2</div>
	<div style="z-index:100; position:absolute;width:300px; height:300px; border:1px solid blue" onclick="tt();">内容区域1 Touch Me</div>
</body>
</html>

内容区域1与2重叠，内容区域2的z-index数值大于内容区域1，所以它显示在1的上面。
此处也用到了ThickBox弹窗特效

<!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" />
<link href="css.css" rel="stylesheet" type="text/css">
<title>http://www.iceapple.net</title>
<script type="text/javascript">
function $(ul)
{
  return document.getElementById(ul)
}//只定义一个方法，不找数据
function tt()
{
   $('mark').style.display='block';
}
//调用上面的方法，找到mark标签并赋给上面方法的参数
</script>
</head>
<body>
<div style="position:absolute;width:100px;height:100px;background:#666666;display:none;top:100px;left:100px;z-index:101;" id="mark">弹出页面内容区域</div>
	<div style="z-index:100; position:absolute;width:300px; height:300px; border:1px solid blue" onclick="tt();">底层大页面内容区域 Touch Me</div>
</body>
</html>

Run This Code

学习之，特此记录
更多详细的解释及代码