网页弹预览窗

网页弹预览窗

不废话 先上图：

大概就是实现了点击播放按钮弹出一个窗口来进行播放。

这个当然可以用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=".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教程