网页弹预览窗 ----------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教程