jquery/js实现浮窗内容操作

jquery/js实现浮窗内容操作

主要实现内容为如下图：

浮窗可以是提示的文字，也可是一系列操作。

完成思路

创建2个div,第二个当作浮窗，所以需要隐藏并且绝对定位；
jquery/js实现：得到第一个div距离屏幕的高和左距离，然后直接设置第二个div的起始左位置可以是与第一个div对齐，就用得到的第一个div的左距离，高度如果想放在第一个div的下面，就通过第一个div距屏幕的高再加上自身的高度。然后将css设置为显示即可。
**Tips:**不管是浮动出现还是点击出现，都可以自己设置；如果想要悬浮出现可操作的内容，就需要在操作框内再进行一次悬浮出现或移除隐藏，因为悬浮出现只用作第一个div的悬浮，当我们移动到第二个div想要进行操作的时候，第一个div的悬浮出现就会失效，第二个div就会被隐藏。

代码实现

以‘举报’操作为例：

html展示悬浮框：（注意的是div的style样式）

<div id="report-hide" style="display: none; position: absolute;">
    <button onclick="reportInfo()"><span style="color: rgb(0, 0, 0);">举报</span>		          </button>
</div>

css展示悬浮框：（这里是悬浮操作）

$(function(){
    $("#report-show").mouseover(function(){
            //获取当前元素距屏幕高和左，offset()函数
            let elem = $('#report-show').offset();
            //得到div自身的高度
            let nhight= document.getElementById('report-show').offsetHeight;
            //得到div距离屏幕的高度 + 自身高度  最后得到自己想要放悬浮的高度(下面)
            let tops = elem['top'] + nhight;
            //设置当前元素的宽、距离浏览器顶部、距离浏览器左边以及部分css的样式
            $("#report-hide").css({
                width: (nhight + 30) + "px",
                height: '30px',
                textAlign:'center',
                lineHeight:'35px',
                background:'url(../imgs/message-bubble.png) no-repeat',
                backgroundSize: '100%',
                backgroundAttachment:'scroll',
                top: tops + "px",
                left: elem['left']+ "px"
            }).show();
    }).mouseout(function(){
            $('#report-hide').css({
                display:'none',
            });
    });
    $("#report-hide").mouseover(function(){
        $('#report-hide').css({
            display:'block',
        });
    }).mouseout(function(){
        $('#report-hide').css({
            display:'none',
        });
    })
})