位置: 编程技术 - 正文

js点击按钮实现带遮罩层的弹出视频效果(js点击按钮实现登陆网页)

编辑:rootadmin

推荐整理分享js点击按钮实现带遮罩层的弹出视频效果(js点击按钮实现登陆网页),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js点击按钮实现反选,js点击按钮实现登陆网页,js点击按钮实现反选,js点击按钮实现伪代码结构,js点击按钮实现伪代码结构,js点击按钮实现登陆网页,js点击按钮实现加减,js点击按钮实现伪代码结构,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下

最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层

点击黄色区域可以关闭视频 并回到最初的状态。

页面主要代码:main中主要包含一个a,控制显示的按钮。设置有id值。

以下代码就是用来控制视频的显示效果,.video-btn 包含了视频显示区域以及右边黄色关闭按钮(虽然黄色关闭按钮有点丑)。

js点击按钮实现带遮罩层的弹出视频效果(js点击按钮实现登陆网页)

id="shadow"用来控制遮罩层。主要是对各元素设置id的值 后面js就可以方便的调用各元素。

下面来看一下有关css

首先设置video-btn区域。

然后设置遮罩层的css

重点1:此处一定把两个div设为绝对定位,让其脱离文档流。

重点2:遮罩层要设置bottom,left,right,top值为0 这样遮罩层就可以平铺整个屏幕了。

重点3:一定要把这两个div设为display:none。让用户一开始是看不到这两个div ,否则一进去就看到这两个会很丑。

重点4:要设置z-index的值,黄色按钮和显示视频那个div的优先级一定要比遮罩层的优先级大,不然点击不了。

现在开始js:前面五个获取id赋值。然后在点击黄色按钮时响应事件。

点击事件1:将视频所在的div设置display:block。将遮罩层所在div设置display:block。 同时,视屏div内显示土豆视频。 此链接为土豆网的分享链接。

点击事件2:在点击黄色x按钮时,应该将这两个div隐藏起来。即设置两个div的display:none。

标签: js点击按钮实现登陆网页

本文链接地址:https://www.jiuchutong.com/biancheng/386425.html 转载请保留说明!

上一篇:js获取本机操作系统类型的两种方法(js获取设备)

下一篇:谈谈我对JavaScript原型和闭包系列理解(随手笔记6)(谈谈我对环境保护的认识)

  • 增值税不交什么后果
  • 支付与其他经营活动有关的现金公式
  • 企业办理银行承兑汇票的手续费用应计入什么账户
  • 个人去税务局开专票需要提供什么
  • 赠品不开票如何做账
  • 收到境外汇款怎么处理
  • 电信电话费计入成本吗
  • 汇算清缴报告和审计报告有什么区别
  • 工业企业员工工资占收入比例
  • 私营企业实行固定税率
  • 担保费和评审费计入什么科目
  • 电商返佣平台有风险吗
  • 上年度的会计分录做错了今年可以调整吗
  • 企业收入进私户怎么做账
  • 股权转让资本公积怎么处理
  • 渔业专业合作社简介
  • 个税手续费退还时间
  • 预收账款缴纳企税怎么算
  • 冲红发票开具
  • 银行承兑汇票加工费合同
  • 税务登记证遗失补办
  • 勾选认证售票状态可以改吗
  • 预缴纳税申报失败怎么办
  • 商品进销差价的核算方法
  • 往年计提有误 跨年处理
  • 职工福利费的构成
  • 应付职工薪酬计提数是借方还是贷方
  • nvm是啥
  • 利息收入结转的正确分录
  • windows无法配置用户文件
  • 收到发票已入账什么意思
  • 盈余 盈利
  • window10自带商店下载位置
  • 包工包料工程要交哪些税
  • php新手入门教程
  • 无效借款合同自被确认为无效之日起无效
  • 小规模纳税人是否可以开专票
  • 网络技术公司技能培训
  • vue做项目的流程
  • ps_clk
  • 工会经费怎么上缴
  • 汇算清缴所得税是什么意思
  • 供应商发票多开了3毛钱能做到财务费吗
  • 错开发票所需要提供的资料和时效要求是?
  • 分批发货分批付款
  • 开矿泉水发票怎么开?
  • 金税四期有什么变化
  • 购入的固定资产,其入账价值包括的内容有
  • 工程材料票占工程款的比例
  • 其他应收款项
  • 金税卡就是税控盘吗
  • 固定资产清理包括什么会计科目
  • sqlserver游标的使用
  • sqlserver数据库恢复挂起状态
  • linux版flash
  • centos 网卡顺序
  • CentOS(x86_64)下PHP安装memcache扩展问题解决方法分享
  • gacrunner.exe是什么
  • 如何限制网速不让孩子玩游戏
  • win10 电脑
  • windows8关机键在哪里
  • win10系统谷歌浏览器为什么打不开
  • win7复制粘贴快捷键经常失效
  • win7怎么查看系统位数
  • cocos2dx3.4 Menu
  • 如何解决android代码红线
  • Cocos2dx CCLabelAtlas字体与CCLabelTTF字体的使用方法
  • dos命令遍历文件
  • html label标签的使用教程
  • python 基础 详细
  • 鼠标瞬间移动
  • python相关图片
  • 有关的拼音
  • 可分割项目
  • jQuery easyUI datagrid 增加求和统计行的实现代码
  • 注销发票怎么处理流程
  • 税务分局长级别
  • 国税局云南省电子税务局
  • 增值税电子普通发票和普通发票区别
  • 大企业如何做好工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设