HTML浮动窗口效果

最新推荐文章于 2025-04-10 11:10:14 发布

随想先感

最新推荐文章于 2025-04-10 11:10:14 发布

阅读量2.6w

点赞数

分类专栏： js 文章标签： js-浮动窗口

本文链接：https://blog.youkuaiyun.com/u013408979/article/details/52817531

版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在项目中使用HTML实现浮动窗口效果，以解决thickbox插件不支持多层级弹出的问题。通过点击按钮，可以弹出浮动窗口展示内容，满足了在弹出窗口中再次弹出的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因项目中弹出窗口用的是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>