HTML浮动窗口效果

因项目中弹出窗口用的是thickbox，但是这个插件不支持多次层级弹出，但是需求需要实现的功能又是在弹出窗口中再次用一个弹出窗口展示效果，就想到了用浮动窗口效果

直接上代码，点击按钮弹出浮动窗口

<input type="text" class="textClass" name="jobSubmit.teaMarkContent" id="teaMarkContent"  />
<input type="button" name="button" class="ButtonStyle" id="selectBtn" value="选择模板" onclick="showCommentDiv(this);" onmouseout="hideCommentDiv();"/>

//浮动窗口的显示隐藏是通过js实现的
<script type="text/javascript">
/*显示浮动框*/
function showCommentDiv(obj) {
var top = $(obj).offset().top;
var left = $(obj).offset().left + $(obj).width() - 7;
$("#commentListDiv").css({'top':top + "px",'left':left+"px"}).show("slow");
}

function showThis(obj) {
$(obj).show();
}
/*隐藏浮动框*/
function hideCommentDiv() {
$("#editCourseDiv").hide();
}
function hideThis(obj) {
$(obj).hide();
}
//获取选中的评语
function getValue(obj) {
var selectId = obj.value;
var selectTitle = obj.title;
$("#teaMarkContent").val(selectTitle);
}

</script>

//浮动窗口展示的内容

<div align="left" id="commentListDiv" onmouseover="showThis(this);" onmouseout="hideThis(this);" style="width:200px;height:200px;border:solid 1px #a1bece;position:absolute;z-index:10000;display:none;background-color:#EEF7EA;">
<p><b>基本评语：</b></p>
<table>
<c:forEach items="${commentListJB}" var="comment">
<tr>
<td>
<span style="white-space:nowrap;">
<input type="radio" name="comment" id="comment" value="${comment.id}" title="${comment.content}" onclick="getValue(this)"/>${comment.content}
</span>
</td>
</tr>
</c:forEach>
</table>
</div>