【海康威视】前端开发：【1】弹框内容被视频画面遮挡，弹框提示如何覆盖视频画面？【已解决】

一、前言：

采用B/S的方式对海康威视进行二次开发，在针对某些需要弹框让用户确认操作的环节，发现弹框被视频画面遮挡，通过调节html元素 Z-Index 属性无法解决；

二、解决方案：

在弹出的div层内部添加元素可以遮挡视频画面，这里是在vue项目中，使用的element-ui 中的弹窗标签，经过对内部iframe元素的强行定位和大小调出来的一个布局效果，至于内部多余的html元素可以根据自己需求处理；

//xxx.vue<el-dialog title="电子围栏：" :visible.sync="IsShow" width="1000px" height="660px"><iframe frameborder="0" width="1000px" height="600px" style="position: absolute; margin-top:-85px; margin-left:-20px;" /><el-row style="margin-top:-30px"><canvas id="myCanvas" ref="myCanvas" width="960px" height="480px" style="border:1px solid #d3d3d3;" @mousedown="Canvas_OnMouseDown($event)" @mouseup="Canvas_OnMouseUP($event)" @mousemove="Canvas_OnMouseMove($event)">浏览器不支持</canvas></el-row><el-row><el-col :span="24" class=" flex flex-align-center flex-pack-center"><el-button class=" " plain @click="Test($event)">清空</el-button><el-button class=" " plain @click="Test($event)">确定</el-button></el-col></el-row></el-dialog>

三、总结：

这个小小的功能看起来很简单，但是却被坑了好几天，里面的视频插件画面尝试了N中方法都没把他给覆盖掉，几经绝望中才找到了这么一种Iframe的方法，对有帮助的小伙伴，你们必须要给我点个赞。

【海康威视】前端开发：【1】弹框内容被视频画面遮挡，弹框提示如何覆盖视频画面？【已解决】相关推荐

web前端开发主要培训哪些内容
想要学会web前端,最好是选择报web前端培训机构是最合适的选择,然后做好学习路线的规划,这样学起来是比较方便且快速的,下面小编就为大家详细的介绍一下web前端开发主要培训哪些内容? web前端开发主 ...
html在线时间统计图,Web前端开发入门，HTML一张图学会，还在看数小时视频浪费时间？...
同样的地方,同样的时间,又跟大家见面了.想学习前端朋友可以加我们的前端学习群:617327703 很多人问我,前端开发入门怎么开始?这里呢,先看下我之前发的文章有大体的概括思路跟流程在里面.今天主要分 ...
python获取网页文本框内容_python识别html主要文本框
在抓取网页的时候只想抓取主要的文本框,例如 csdn 中的主要文本框为下图红色框: 抓取的思想是,利用 bs4 查找所有的 div,用正则筛选出每个 div 里面的中文,找到中文字数最多的 div 就 ...
前端开发：Vue报错Computed property “show“ was assigned to but it has no setter的解决方法
前言在前端开发中,使用Vue的时候关于组件使用是非常常见的操作,而且也会遇到各式各样的问题,尤其是刚接触前端开发的开发者.本篇博文分享一下在封装关于Vue的组件的时候,通过计算属性监听父子组件传值提 ...
从0开始前端开发_设置DIV内容居中
想要让DIV里的内容居中可以用如下代码: <style type="text/css">div{ text-align:center; //文本内容居中,可以将文本和图 ...
手动清空Element Select选择框内容 v-model 和 option下拉框选项导致无法select选中，或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据科目选中后的内容,来进行搜索,所以当科目清空后名称/ID 需要清空 v-model 的值.以及 el-op ...
前端开发：Vue项目报错NavigationDuplicated：Avoided redundant navigation to current location：“/XXX”的解决方法
最近在Vue项目开发的过程中遇到一个问题,那就是在点击同一个路由操作的时候,控制台会报一下错误提示: Uncaught (in promise) NavigationDuplicated: Avoid ...
html下拉框内容新增,给html下拉框控件自动添加数据
function AddRow(){ var myTable = tElementById("ctl00_ContentPlaceHolder1_zjjzzTB"); var ne ...
【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
前端开发中的调试技巧
前端开发中的调试技巧骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览 ...

【海康威视】前端开发：【1】弹框内容被视频画面遮挡，弹框提示如何覆盖视频画面？【已解决】

一、前言：

二、解决方案：

三、总结：

【海康威视】前端开发：【1】弹框内容被视频画面遮挡，弹框提示如何覆盖视频画面？【已解决】相关推荐

最新文章

热门文章