jquery点击输入框弹出信息，广泛用于导航下拉列表或者选择提示。用到jquery的 offset 方法定位,隐藏时用了很冏的实现方法，各位如果有更好的方法欢迎指出。
ps:直接使用google API库内的jquery（可被缓存）可减少http请求。
<!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=utf-8" />
<title>点击弹出</title>
<style>
#float_div {
height: 100px;
width: 200px;
background-color:#fec;
z-index: 999999;
position: absolute;
border:1px solid green;
margin-top:2px;
}
</style>
<script src="jquery-1.6.2.min.js" type='text/javascript'></script>
<script>
$(document).ready(function() {
$('.test').click(
function(){
var offset = $(this).offset();
$('#float_div').remove();
$('body').append('<div id="float_div"></div>');
$('#float_div').css({'top':offset.top+$(this).outerHeight(true) ,'left':offset.left});
});
//隐藏弹出层
$('html').click(
function(event){
if(event.target.className !='test' && event.target.id !='float_div')
//$('#float_div').hide();
$('#float_div').remove();
}
);
});
</script>
</head>
<body>
<!-- <div id="float_div">some contents</div> -->
<div>
<input type="text" id="id1" value="">
<input type="text" id="id2" value="">
<input type="text" id="id3" value="">
<br/>
<input type="text" id="id4" value="">
<br/><br/>
<input type="text" id="id4" value="">
</div>
</body>
</html>