<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery-1[1].3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var wordinput=$("#word");
var wordinputoffset=wordinput.offset();
$("#outo").hide().css("border","1px black solid").css("position","absolute")
.css("top",wordinputoffset.top + wordinput.height() + 5+ "px")
.css("left",wordinputoffset.left +"px").with(wordinput.width()+2);
}
</script>
</head>
<body>
<table align="center">
<tr >
<input type="text" id="word"/>
</tr>
</table>
<div style="display: block" id="outo" >
sdasd
</div>
</body>
</html>
WIN.CSS
/*id选择器*/
#win{
/*希望有边框*/
border: 1px red solid;
/*固定框的高度和宽度*/
width:300px;
height:200px;
/*控制窗口位置*/
position:absolute; /*绝对定位*/
top:100px;
left:350px;
/*开始设置为不可见的*/
display:none;
}
#title{
background-color:blue;
color:yellow;
padding-left:5px;
}
#content{
padding-left:5px;
padding-top:10px;
}
#close{
margin-left:160px;
cursor:pointer;
}