1. 程式人生 > >HTML浮動視窗效果

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>