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',});})
})

jquery/js实现浮窗内容操作相关推荐

vue中使用echarts实现地图颜色渐变及自定义浮窗内容
在这篇文章里vue中使用echarts自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客,总结了echarts的一些简单用法.这篇文章,一个是在原来的自定义浮窗内容上实现了地图的颜色渐变,一个是简化 ...
jquery js 设置 div 的内容，给 div 添加一个属性
设置 div 的内容的写法: jquery 的写法: $( "#div1" ).html( "aa" ); // 将 div1 元素里面的 html ...
python登录微信pc版_微信pc版内测更新！可同步查看手机浮窗、手机正在浏览的内容...
微信移动端.pc端正在逐渐实现无缝连接. 作者丨Tsai 近日,微信Windows端2.7.1.82版发布更新. 此次新版本,新增了"同步手机浮窗"."手机正在浏览&qu ...
python 悬浮窗_python浮窗
import wx; app = wx.App(); win = wx.Frame(None,title="老穆视频",pos=(900,20),size=(300,60),sty ...
Android浮窗实现(WindowManager)
浮窗就是当当前页面关闭后,仍能在手机上显示的窗口,像浮在最上层一样,一直存在,一般可跟随手拖动而移动. 加速球就是一个浮窗. 浮窗的大小和形状等都可以自己设定,不是一定的. 效果(屏幕中小方形为浮窗, ...
html效果浮窗效果,网页浮窗成效
当前位置:我的异常网» Web前端 » 网页浮窗成效网页浮窗成效 www.myexceptions.net 网友分享于:2014-12-05 浏览:0次网页浮窗效果 Fixed固定位置的悬浮 ...
html效果浮窗效果,jQuery简单实现中间浮窗效果
本文实例讲述了jQuery简单实现中间浮窗效果.分享给大家供大家参考,具体如下: basic.css: /* * -- 样式说明 -- * 最大优先实现法,全局能实现不用区域,区域能实现不用模板,模板 ...
auto.js开发网课搜题浮窗软件，类似按键精灵可浮窗式快速搜题
网课搜题浮窗软件实战开发一个浮窗式的安卓搜题软件准备知识:javascript auto.js一些基础语法打包工具:auto.js7.401 免费接口可以自己去找!网上一大堆. 学习资料领取及工具 ...
jQuery元素内容操作的方法有多少种?
jQuery中操作元素内容的方法,主要包括html()方法.text()方法和val()方法.html()方法用于获取或设置元素的HTML内容,text()方法用于获取或设置元素的文本内容,val() ...

jquery/js实现浮窗内容操作

jquery/js实现浮窗内容操作

完成思路

代码实现

jquery/js实现浮窗内容操作相关推荐

最新文章

热门文章