网页开发设计

HTML网站里面通过JS实现点击弹出层的特效

今天午在整理央视旗下一个发现品牌栏目组活动页面的时候,感觉若直接用原官方页面则需要添加很多次,比较麻烦而且在新窗口里面还很单一;于是就想着做成弹窗层的形式;经过好一会儿的琢磨,最后终于搞定,效果如下:

添加代码如下:

<link href="https://www.yunxiaosoft.com/images-cctv/component.css" rel="stylesheet">					
<a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">欲被点击的内容,可为文字、亦可为图片</a>
<div class="md-modal md-effect-1" id="modal-1" style="top: 70%;">
<div class="md-content">
<h3><button class="md-close btn-sm btn-primary">关闭视频窗口</button></h3>
<div>
<p><video width="500" height="280" controls>
<source src="https://cdn.yxbrand.com/1597136609925.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
</p>
</div>
</div>
</div>
<script src="https://www.17sucai.com/preview/1/2017-04-05/mtk/js/classie.js"></script>
<script src="https://www.17sucai.com/preview/1/2017-04-05/mtk/js/modalEffects.js"></script>

在具体预览效果可参考:https://www.yunxiaosoft.com/pinpaicctv.html

(0)
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;
LensNews

发表评论