本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下
最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层
点击黄色区域可以关闭视频 并回到最初的状态。
页面主要代码:main中主要包含一个a,控制显示的按钮。设置有id值。
本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下
最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层
点击黄色区域可以关闭视频 并回到最初的状态。
页面主要代码:main中主要包含一个a,控制显示的按钮。设置有id值。
以下代码就是用来控制视频的显示效果,.video-btn 包含了视频显示区域以及右边黄色关闭按钮(虽然黄色关闭按钮有点丑)。
id="shadow"用来控制遮罩层。主要是对各元素设置id的值 后面js就可以方便的调用各元素。
下面来看一下有关css
首先设置video-btn区域。
然后设置遮罩层的css
重点1:此处一定把两个div设为绝对定位,让其脱离文档流。
重点3:
重点4:要设置z-index的值,黄色按钮和显示视频那个div的优先级一定要比遮罩层的优先级大,不然点击不了。
现在开始js:前面五个获取id赋值。然后在点击黄色按钮时响应事件。
以上就是本文的全部内容,希望对大家的学习有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。