HTML网站里面通过JS实现点击弹出层的特效-♚付涛纪实阁♚

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

文章不错?【打赏】给我点更新欲望

取消

感谢您的支持,我会继续努力的!

扫码支持

打开手机微信扫一扫,即可进行扫码打赏哦

【友情提示:】
1、如果你的问题还没有解决,可以点击关注我们微信视频号【付涛纪实阁】互动交流。如果你想请站长喝咖啡,点击打赏按钮扫码赞赏。
2、文章内容系作者个人观点,不代表除个人作者外的任何第三方针对观点赞同或支持;
3、本文为「♚付涛纪实阁♚」原创文章,遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明。
4、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;
16

发表评论