本文主要是介绍网页弹预览窗 ----------gxy,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
不废话 先上图:
大概就是实现了点击播放按钮弹出一个窗口来进行播放。
这个当然可以用window.open来实现,但是那个 比较浏览器化。用这个还是挺炫的。
接下来说一下使用方式:
1、导入必须的两个js
2.html
<div class="row absolute-image-container"><div class="col-md-6 col-md-offset-6"><img class="max-width-100 position--realtive" src="images/video.png" alt=""><div class="position--absolute top-0 left-0 full-width full-height"><div class="buttuon-container"><div class="btn-wraper"><a href="http://www.iqiyi.com/v_19rrbv2s0s.html" class="popup-youtube btn btn-icon btn-round btn-icon-text test-popup-link"><span class="btn-icon-container-lg btn-icon-text-container bg-white border-white-opacity"><i class="ion-play"></i></span><span class="margin-left-10 line-height-btn-lg text-white">watch story</span></a></div></div></div></div></div>
3.js
$('.popup-youtube').magnificPopup({disableOn: 700,type: 'iframe',mainClass: 'mfp-fade',removalDelay: 160,preloader: false,fixedContentPos: false});
详情还是浏览jquery.magnific-popup.min.js教程
这篇关于网页弹预览窗 ----------gxy的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!