手撸一个动态居中带渐隐渐显蒙层的 html 模态窗口

Unity 开发 WebGL 的项目想要播放视频，我觉得使用 H5 的 标签就够了，想做一个通过RTSPtoWebRTC 在浏览器播放 rtsp 的示例，所以先撸个弹窗试下。

前言：

先说什么是模态窗口，模态窗口通俗来讲就是独占 UI 框架最上层的窗口，不关掉这个窗口，其他窗口休想关闭。
那么，咱们用于播放视频的 html 模态窗口需求不就来了：

1. 有个蒙版遮蔽整个网页；
2. 蒙版最好能渐隐渐显；
3. 点击蒙版周边区域，弹窗关闭；
4. 弹窗位置动态适配浏览器尺寸实现永远居中

实现：

Talk is cheap show me your code.

1. 先整蒙版、蒙版关闭按钮、弹窗的层叠样式表实现他们的布局。

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0;
            display: none;
            z-index: 99;
        }

        .closebutton {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0;
            display: none;
            z-index: 100;
        }

        .panel {
            position: absolute;
            display: none;
            text-align: center;
            z-index: 101;
        }

2. 再整 js 逻辑实现蒙版、弹窗的显示隐藏、视频播放以及一个简陋的 html 测试页面，逻辑有注释，看注释交流。

    
    
    
    
    



    
点击以弹窗形式居中播放视频
     
    

    
    

        
    

明明写的是 JS 但总感觉 C#里C#气的！

效果：

Tips：从动图演示来看，好像把上面谈到了需求都实现了哈。

写到最后：

• 非网页前端，面向百度编程，大佬轻拍。
• 使用了第三方插件 jquery
• 最原始的参考博客是这个：基于jquery的弹出提示框...
• 为方便交流，上传 Github
• 【Unity 3D】怎么在 WebGL 中低延迟播放 RTSP 监控 - out of box
• 【Unity 3D】怎么在Unity开发的应用中播放海康、大华、宇视监控 - Unity 3D] 开箱即食的头部监控厂商 SDK 集成框架