<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#tip
{
width:200px;
border:1px solid red;
height:100px;
position:absolute;
z-index:100;
display:none;
background:#999; /*注意这里要设置层的背景颜色，不然在ie6 中会出现一个怪弊的现象，就是只能点击层中有文字内容的地方，才能触发层的click事件，点击层的其他空白区触发的是document 的click事件*/
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src=" jquery.bgiframe.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(event){
var position = $(this).offset(); //获得元素的位置，不能使用event.clientX 和 event.clientY,因为这只是读取当前鼠标的位置相对于document 的上边界而言，当文档内容出现滚动条果，这种方式就不行了。
$("#tip").css({left:position.left + 'px',top:(position.top + 20) + 'px'});
$("#tip").toggle(); //这里使用toggle() 就行，这样可以实现隐藏显示的自动切换。
event.stopPropagation(); //阻止事件冒泡
});//end click
$("#tip").click(function(event){ //注册弹出层的单击事件，作用是单击层时不隐藏层，这里只是为了阻止冒泡，因为单击层时，默认情况下会向上冒泡触发document 的click事件.
//alert("tipclick"); //这里用作调试
event.stopPropagation();
}); //end click
$("#tip").bgiframe(); //防止ie 6下z-index的问题
}); //end ready
$(document).click(function(){ //注册文档的单击事件，单击文档的任何地方隐藏层
//alert("documentclick");
$("#tip").hide();
}); //end click
</script>
</head>
<body>
<a id="test" href="javascript:void(0);">测试</a>
<div id="tip">
我是弹出层
</div>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#tip
{
width:200px;
border:1px solid red;
height:100px;
position:absolute;
z-index:100;
display:none;
background:#999; /*注意这里要设置层的背景颜色，不然在ie6 中会出现一个怪弊的现象，就是只能点击层中有文字内容的地方，才能触发层的click事件，点击层的其他空白区触发的是document 的click事件*/
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src=" jquery.bgiframe.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(event){
var position = $(this).offset(); //获得元素的位置，不能使用event.clientX 和 event.clientY,因为这只是读取当前鼠标的位置相对于document 的上边界而言，当文档内容出现滚动条果，这种方式就不行了。
$("#tip").css({left:position.left + 'px',top:(position.top + 20) + 'px'});
$("#tip").toggle(); //这里使用toggle() 就行，这样可以实现隐藏显示的自动切换。
event.stopPropagation(); //阻止事件冒泡
});//end click
$("#tip").click(function(event){ //注册弹出层的单击事件，作用是单击层时不隐藏层，这里只是为了阻止冒泡，因为单击层时，默认情况下会向上冒泡触发document 的click事件.
//alert("tipclick"); //这里用作调试
event.stopPropagation();
}); //end click
$("#tip").bgiframe(); //防止ie 6下z-index的问题
}); //end ready
$(document).click(function(){ //注册文档的单击事件，单击文档的任何地方隐藏层
//alert("documentclick");
$("#tip").hide();
}); //end click
</script>
</head>
<body>
<a id="test" href="javascript:void(0);">测试</a>
<div id="tip">
我是弹出层
</div>
</body>
</html>
bgiframe 插件用来轻松解决 IE6 z-index 的问题，如果网页上有浮动区块和下拉选单重叠时，在IE6会看到下拉选框总是把浮动区块覆盖住，无论怎么调整 z-index 都是没用的，而用 bgiframe 就可以轻松解决这个问题。
使用方法：
$(document).ready(function() {
$('#floatingBox').bgiframe();
});
项目主页： http://plugins.jquery.com/project/bgiframe
下载地址:http://plugins.jquery.com/files/bgiframe_2.1.1.zip