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、本站文章均为博主原创,如需转载,请注明文章来源;
2

发表评论