沉浸式阅读
Beta

jquery教程:多功能弹出窗口特效插件Popuptools.js

     订阅 网页特效     2016-02-14     模板开发网(www.mbkfw.com)    小黑    2021    0    0    0    
学习要点:先来看一张特效截图吧:也许看官已经猜到了是什么特效,没错!就是一个带关闭按钮的弹出窗口特效。虽然网上类似插件很多,但艺灵的这款插件功能确实要比一般的弹出插件强很多。不信?请往下看。由于jquery源码比较多,艺灵就不一一详细讲解如何实现的了,只讲下实现的大致步骤,然后是一堆实例教看官如何使用此插件。一、弹出功能分析0.点击页面中指定按钮时触发弹出功能;1.一个半透明黑色背景全屏铺展开来,挡住原来的页面;2.隐藏浏览器滚动条,避免拉动滚动条时中间的弹出内容滚动;3.中间的主弹出窗口位于浏览器中间位置,任意调

先来看一张特效截图吧:窝窝宝收藏时弹出窗截图

也许看官已经猜到了是什么特效,没错!就是一个带关闭按钮的弹出窗口特效。虽然网上类似插件很多,但艺灵的这款插件功能确实要比一般的弹出插件强很多。不信?请往下看。

由于jquery源码比较多,艺灵就不一一详细讲解如何实现的了,只讲下实现的大致步骤,然后是一堆实例教看官如何使用此插件。

一、弹出功能分析

0.点击页面中指定按钮时触发弹出功能;
1.一个半透明黑色背景全屏铺展开来,挡住原来的页面;
2.隐藏浏览器滚动条,避免拉动滚动条时中间的弹出内容滚动;
3.中间的主弹出窗口位于浏览器中间位置,任意调整浏览器窗口仍处于中间位置;
4.点击关闭按钮时关闭弹出窗口、关闭全屏半透明背景、恢复滚动条功能

好了,弹出插件的功能就已经分析完毕了,这个代码写下来也不少吧。但艺灵还新增了自己独特的特效在里面!

普通的弹出窗口都是直接显示,非常呆板,艺灵写的Popuptools.js中提供了5种特效。

二、艺灵新增5种展示特效

0:show+hide
1:fadeIn+fadeOut
2:slideDown+slideUp;
3:addclass+removeClass;
4.display;

除此之外,艺灵的这个Popuptools.js弹出插件还提供了3种不同的弹出类型。

三、艺灵新增3种弹出类型

0:img
1:embed
2:自定义html;

功能已经分析完了,接下来是如何调用插件。

四、引入Popuptools.js插件

1.引入弹出插件

  1. <!--引入jquery库。此库版本必须要大于1.7+,如果页面中已引入,可忽略此库-->
  2. <script src="https://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8" ></script>
  3. <!--引入Popuptools.js插件-->
  4. <script src="https://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.js" type="text/javascript" charset="utf-8"></script>

引入插件完成后,接下来我们就可以做一些案例了。我们今天主要讲弹出类型为img时的一些案例。

五、插件框架讲解

1.html框架

  1. <!--触发弹出按钮-->
  2. <span class="demo-btn1" data-config='{type:",分别是:img(图片)、embed(视频)、html(自定义内容)",src:"对应类型的地址,当type为img或embed时,这里填写对应的地址;",title:"标题,例如:扫一扫关注xx微信号",width:"弹出框架宽度,eg:500",height:"弹出框架高度,eg:300",oldwidth:"弹出图片原始宽度,eg:800",oldheight:"弹出图片原始高度,eg:600"}' title="点击图片查看原图" >点我弹出二维码</span>
  3. <!--待弹出框架-->
  4. <div class="pop-gybg " style="display: none;"></div>
  5. <div class="popup-w demo1" style="display: none;">
  6. <div class="pop-box-w" >
  7. <!--预留用户内容-->
  8. </div>
  9. <div class="pop-gydel gydel" title="关闭按钮" >×</div>
  10. </div>

上面的html源码分为两部分:一部分是一个触发的弹出按钮,一个是待弹出的窗口。注意上面代码中黄色高亮部分,这些都表示用户可以自己修改。

由于弹出图片时判断条件过多,所以这个触发弹出按钮里面添加了很多属性,看官在调用时依次修改便是。

下面来说下怎么调用插件。

1.jquery调用插件

  1. <script type="text/javascript">
  2. $(function(){
  3. $('.demo-btn1').Popuptools({
  4. pop_bg:".pop-gybg",
  5. pop_parent:".demo1",
  6. pop_box:".pop-box-w",
  7. pop_on:"pop_on",
  8. pop_hide:"o-y",
  9. pop_imgclass:"pop-B-img", //弹出时显示的元素样式名(img,embed,other)
  10. pop_msgclass:"pop-msg", //提示信息的类名
  11. pop_type:0, //0:弹出+关闭功能,1:只有关闭功能
  12. pop_bgqp:1, //0表示半透明背景不全屏,1表示全屏
  13. pop_m_type:0, //0:隐藏提示信息,1:显示提示信息
  14. pop_effect:0, //切换类型0:show+hide;1:fadeIn+fadeOut;2:slideDown+slideUp;3:addclass;4.display;
  15. pop_hidetime:300,
  16. pop_showtime:300,
  17. pop_padding:10,
  18. del_this:".pop-gydel" //关闭按钮class
  19. });
  20. });
  21. </script>

黄色高亮部分均表示看官可以进行修改,下面来看一个在线的demo吧。

六、demo欣赏

demo演示

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Popuptools.js插件功能一:弹出图片</title>
  6. <meta name="Keywords" content="jquery弹出层插件,jquery弹出框插件,jquery教程,弹出窗口特效,Popuptools.js,窝窝宝" />
  7. <meta name="author" content="艺灵设计,www.yilingsj.com"/>
  8. <link rel="stylesheet" type="text/css" href="https://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.css"/>
  9. </head>
  10. <body>
  11. <div class="demo-w">
  12. <h1>Popuptools.js插件功能一:弹出图片</h1>
  13. <p>弹出类型:img<br>弹出特效:show+hide</p>
  14. <br />
  15. <br />
  16. <br />
  17. <span class="demo-btn1" data-config='{type:"img",src:"https://www.wowobao.com/skin/wowobao_skin/images/weixinerm.jpg",title:"手机扫一扫,关注窝窝宝",width:"300",height:"300",oldwidth:"250",oldheight:"250"}' title="点击图片查看原图" >点我弹出二维码</span>
  18. </div>
  19. <div class="pop-gybg " style="display: none;"></div>
  20. <div class="popup-w demo1" style="display: none;">
  21. <div class="pop-box-w" >
  22. <!--预留用户内容-->
  23. </div>
  24. <div class="pop-gydel gydel" title="关闭" >×</div>
  25. </div>
  26. <!--引入jquery库。此库版本必须要大于1.7+,如果页面中已引入,可忽略此库-->
  27. <script type="text/javascript" charset="utf-8" src="https://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
  28. <!--引入Popuptools.js插件-->
  29. <script type="text/javascript" charset="utf-8" src="https://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.js" ></script>
  30. <script type="text/javascript">
  31. $(function(){
  32. $('.demo-btn1').Popuptools({
  33. pop_bg:".pop-gybg",        
  34. pop_parent:".demo1",         
  35. pop_box:".pop-box-w",         
  36. pop_on:"pop_on",         
  37. pop_hide:"o-y",          
  38. pop_imgclass:"pop-B-img",     
  39. pop_msgclass:"pop-msg",        
  40. pop_m_type:1,           
  41. pop_type:0,            
  42. pop_bgqp:1,             
  43. pop_effect:0,        
  44. pop_hidetime:300,        
  45. pop_showtime:300,        
  46. pop_padding:10,         
  47. del_this:".pop-gydel"      
  48. });
  49. });
  50. </script>
  51. </body>
  52. </html>

提示:【复制代码】与【保存代码】功能暂只支持ie内核哦^v^

上面代码运行后的效果图是这个样子的:Popuptools.js插件弹出图片时的截图

我们还可以修改pop_effect的值来展示其它几种特效,这里就不写代码了。艺灵已做好一个完整的demo页面,看官打开后可自己欣赏不同的特效。

demo演示

  1. demo演示更换pop_effect的值可看到不一样的效果哦!案例猛戳→→→→→

至于如何弹出视频,看官可在下面自己练习,艺灵明日会写关于视频的教程文章,敬请期待。

----------完----------

本文标题: jquery教程:多功能弹出窗口特效插件Popuptools.js

本文链接: https://www.mbkfw.com/course/269.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议


色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈