位置: 编程技术 - 正文

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)(谈谈我对环境保护的认识)

  • 个体户如何报税步骤
  • 企业所得税的成本是含税还是不含税
  • 季度对账单 怎么处理
  • 红字发票申请表盖什么章
  • 增值税专票经办人怎么填
  • 本月完工入库会计分录
  • 个税手续费返还政策最新规定2023
  • 营改增后哪些费用可以抵扣
  • 一般纳税人税率2023
  • 收到投资款现金流量项目是什么
  • 农业生产企业是指什么
  • 注册资金印花税是资金账簿吗
  • 上月开票次月开红票销项税额有什么影响?
  • 医院开发票需要税号吗
  • 合伙企业如何计算缴纳个人所得税
  • 无票收入增值税申报表怎么填小规模纳税人
  • 补缴的增值税可以计入以前年度损益调整
  • 财务做哪些工作
  • 一般纳税人取得免税农产品进项怎么抵扣
  • 加工贸易的方式
  • 闲置房屋
  • 公司资金周转困难怎么办
  • 修改远程桌面端
  • php写入xml
  • 中秋节福利产品清单
  • 增值税留抵退税政策2023
  • 艾草的功效与作用洗头
  • php分段
  • php的运算符主要包括哪些?
  • 期末未缴税额是负数,本月申报为什么没有抵扣
  • php redis常用命令
  • 运输费计税吗
  • opencv项目开发实战
  • win11永久关闭桌面弹出广告
  • ie11已经为了帮助保护您的计算机而关闭此网页
  • break能结束一个函数的调用
  • 不发工资可以交五险一金吗
  • 出口退税退下来还得缴税吗
  • 补缴去年的税款会计分录
  • 预收账款开票了怎么做账报税
  • 计算机网络面试八股文
  • mysql5.7.23安装配置教程
  • 增值税进项发票勾选认证流程
  • 小规模收入账务
  • SQLServer2005 XML数据操作代码
  • 新会计准则股权投资
  • 小规模纳税人财务报表季报怎么填
  • 电商新规则
  • 起征点和免征额都是税收优惠形式
  • 疫情期间统筹部工作总结
  • 餐饮企业原材料采购描述错误的是
  • 绿化植物税率
  • 怎么填写专用发票信息
  • 子公司和区域公司的区别
  • 单位给员工购买公积金流程
  • 计提房产税的账务处理
  • 会计账簿按用途分类分为什么
  • 生产成本是费用要素吗
  • 会计账簿的设计要与会计报表相衔接 ()X
  • mac系统自带的杀毒软件
  • ubuntu有线正在连接
  • linux中添加用户和组的操作
  • win7系统如何创建管理员账户
  • windows7文件夹选项在哪里
  • xp桌面图标设置
  • 更加有效率
  • 在Linux系统中如何打开R语言控制台
  • win10系统收不到wifi信号
  • 检查linux是否安装了,可用哪些命令
  • win10登陆背景修改器
  • javascript数学
  • Unity3d中GridLayoutGroup自适应高度
  • jquery给元素添加属性值
  • jQuery插件cxSelect多级联动下拉菜单实例解析
  • Android多个surface
  • 河南网上税务申报步骤
  • 1.6t车船税
  • 成都市青羊区国有资产监督管理办公室
  • 同比减少怎么计算出来
  • 在深圳月薪8000是什么水平
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设