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>