我想问一下大佬们视频弹窗怎么做，不希望跳转页面，并且能在多个页面实现

Question

然后出现弹窗

我用的是隐藏元素，把元素隐藏，点击后属性设置block。实现弹出窗口，我希望在多个页面实现这样的功能。这样很明显太麻烦了，我并不希望跳转页面，希望大佬给予解答

Answer 1

把弹窗相关的代码单独分离出去，做成公共的组件，然后那里需要就那里调用。

Answer 2

封装成一个图片弹窗组件，你也可以理解成是一个函数

function showVedioDialog(src){
    //设置视频地址
    //append 这段div
    //关闭的时候删除这段div
}

//在需要的页面引入showVedio这个组件
//然后注册相关事件
$("vedio").click(function(){
    let src = $(this).data("src")
    showVedioDialog(src)
})

Answer 3

全屏遮罩+绝对定位的DIV
你说有多个地方会使用，提取成组件不行么？
即点击时绑定对应class名字的dom元素，从dom元素中读取信息，传入组件，组件内容变化根据传入内容变化，展示遮罩，展示DIV。
大概就这个思路