一、前言:
采用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的方法,对有帮助的小伙伴,你们必须要给我点个赞。