一、前言：

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