网页弹预览窗 ----------gxy

比眉伴天荒 2022-05-28 01:00 191阅读 0赞

不废话 先上图：  
![这里写图片描述][70]

![这里写图片描述][70 1]

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

这个当然可以用window.open来实现，但是那个 比较浏览器化。用这个还是挺炫的。

接下来说一下使用方式：  
1、导入必须的两个js  
![这里写图片描述][70 2]

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教程

[70]: /images/20220528/78348fbceec04dbfb84a3127b19ce572.png
[70 1]: /images/20220528/a47319e88fe541a9bbd31f3f0765562b.png
[70 2]: /images/20220528/8b0157b747f64437ade402209204e2a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中使用el-popover实现悬浮弹窗显示图片预览

场景数据库中存储照片的磁盘路径，需要鼠标在el-table的路径字段上悬浮时弹窗进行图片网络URL的预览，所以需要在悬浮后对图片路径进行磁盘路径和网络URL映射路径

野性酷女/ 2022年10月16日 07:46/ 0 赞/ 15 阅读

相关 SweetAlert2网页弹窗---JAVASCRIPT弹窗

一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗，无任何依赖中文文档地址:[http://mishengqiang.com/swe

ゞ浴缸里的玫瑰/ 2022年09月04日 14:53/ 0 赞/ 233 阅读

相关网页弹窗代码特效大全

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特

谁践踏了优雅/ 2022年07月11日 15:56/ 0 赞/ 386 阅读

相关预览github上面的网页

很多新手把自己的网页上传到github仓库中却发现点进去相应的html文件是出来的是代码而不是自己想在网上看到自己仓库中的demo(也就是网页的效果)；今天分享两个网站，

朴灿烈づ我的快乐病毒、/ 2022年06月15日 09:42/ 0 赞/ 159 阅读

相关微信小程序实现弹窗预览图片

今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 [微信

梦里梦外;/ 2022年05月28日 10:59/ 0 赞/ 640 阅读

相关网页弹预览窗 ----------gxy

不废话先上图： ![这里写图片描述][70] ![这里写图片描述][70 1] 大概就是实现了点击播放按钮弹出一个窗口来进行播放。这个当然可以用window.op

比眉伴天荒/ 2022年05月28日 01:00/ 0 赞/ 192 阅读

相关 VSCode设置网页代码实时预览

目录一、设置描述二、操作步骤 -------------------- 一、设置描述 1.VSCode作为一款很不错的开发软件，相比DW更小巧，用来测

r囧r小猫/ 2022年05月07日 17:38/ 0 赞/ 295 阅读

相关网页弹窗

layer 强烈推荐 [layer官方演示与讲解（jQuery弹出层插件）][layer_jQuery] 手动实现警告框最不推荐的 $(".close"

一时失言乱红尘/ 2022年02月02日 12:43/ 0 赞/ 303 阅读

相关 react-native 底部弹窗选项卡 + 上传图片 +预览图片

效果图，支持默认图片，上传中的状态，最大上传数量，预览大图等功能 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

向右看齐/ 2021年08月13日 20:56/ 0 赞/ 331 阅读

相关 java上传视频图片，使用layer弹窗预览

java上传视频图片，使用layer弹窗预览 JSP代码

朱雀/ 2020年10月01日 02:19/ 0 赞/ 754 阅读