问答

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

作者:admin 2021-09-09 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

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} />
###

试试 lightbox

###

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

###

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 大佬救我!!我想用html来做一个弹窗,

    大佬救我!!我想用html来做一个弹窗,

  • 使用export default的时候 如何获得要

    使用export default的时候 如何获得要

  • 嵌套数组如何快速铺平

    嵌套数组如何快速铺平

  • 【解惑】axios请求同一接口,post请求

    【解惑】axios请求同一接口,post请求

腾讯云代理商
海外云服务器