大佬救我！！我想用html来做一个弹窗，点击后弹出视频播放窗口

Question

点击后

弹出窗口

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

Answer 1

Why Not 封装成组件？

eg:

组件：

const popover = ({ visible, url }) => <div>
    <vedio src={url} style={ visible ? { display: 'block'} :    {display: 'none'}/>
    { props.children }
 </div>

使用：

<Popover visible={visible} url={something}>
    <button onClick={setVisible(!visible)}>弹出</button>
</Popover>

如果你的button 定制性不强，你甚至可以将button 封到组件里面。然后这样使用：

<Popover visible={visible} url={something} />

Answer 2

试试 lightbox

Answer 3

按照lucifer说的，把播放器写在浮层里，轻松解决呀！不跳页！

Answer 4

有个layer弹窗插件，多简单的

Answer 5

封装成弹窗组件，就不局限于弹视频了，各种弹都可以了