jQuery弹框、弹出层插件method.js

所属分类:UI-弹出层

 11554  65  查看评论 (29)
jQuery弹框、弹出层插件method.js ie兼容8

更新时间:2017-12-20 10:20:20

更新说明:修复 自适应屏幕bug


更新时间:2017-12-19 15:56:24

更新说明:新增 小弹框  如 项目中很多时候需要弹框中 点击发送验证码  发送成功后的提示弹框


更新时间:2017-8-14 14:55:27

更新说明:1)优化弹框尺寸,优化后可不传弹框宽高,让弹框的宽高自适应

                 2)优化弹框内容,新增可通过传html路径来将html中的内容显示在弹框中

                 3)新增按钮的回调函数,点击取消或确定按钮后执行的操作。

配置说明:

     type(表示切换显示效果):slideFromTop、slideFromBottom、showSweetAlert、none、layerFadeIn、layer-fadeInUpBig、layer-rollIn、layer-shake、layer-spread、layer-fadeIn

     title(弹框标题):如不需要标题,则不需要传此参数

     close(弹框关闭按钮):close属性为false为没有关闭按钮,close属性为true或无close属性则有关闭按钮

     content/url:(弹框主要内容):如果内容简洁,可将内容放到content中。如内容比较复杂,可另建一个html文件(如a.html),

     a.html中只需要放内容标签(你需要放html和body标签等),如我是弹框内容。配置参数中只需要传url:"a.html"

     注:content和url必须选择其一,并且只能选择其中一项

     btn表示按钮组,值为""的时候,则表示不显示该按钮。否则显示该按钮,如["","保存"]

     callBack1表示点击完第一个按钮执行的回调函数

     callBack2表示点击完第二个按钮执行的回调函数

     area表示弹框的宽度和高度。如不传值则宽高自适应


使用方法

1、type值用来切换显示效果

type值:slideFromTop、slideFromBottom、showSweetAlert、none、layerFadeIn、layer-fadeInUpBig、layer-rollIn、layer-shake、layer-spread、layer-fadeIn

如:type:"slideFromBottom"

2、title用来设置标题,如不添加title属性,则弹框无标题。如title:"弹框标题"

3、close为关闭按钮,close值为false则没有关闭按钮,close值为true或者不添加close属性,则显示关闭按钮。如: close:"false"

4、content为弹框主要内容

5、area为弹框尺寸,如无area属性,则弹框尺寸自适应。如有area,则第一个值为宽,第二个值为高。如area:["500px","200px"]

6、btn为取消按钮和提交按钮组合,值为0则表示不显示。如: btn:[0,"保存"]

相关插件-弹出层

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 11554  65

jQuery多功能图片弹窗插件pirobox

点击图片列表中的图片会放大,并可以随意切换
  弹出层
 11430  78

jQuery html5爆裂式登录效果

HTML5爆裂式关闭窗口动画登录模板,关闭窗口撕开动画效果。
  弹出层
 14555  176

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 11260  74

讨论这个项目(29)回答他人问题或分享插件使用方法奖励jQ币

    春天的花开秋天的风 0
    2018/1/12 11:48:23

     url:"a.html",貌似我这不起作用啊

    回复
    你的幸福我负责 0
    2018/1/3 10:48:37

    应该不错

        我怀念的0
        2018/1/6 18:40:46
        没币,但是想用咋办
        dongading0
        2018/1/8 15:20:18

        查看演示中 查看插件源代码 

    回复
    九色鹿 0
    2017/12/30 18:33:22

    发给人二位发热

    回复
    がさいゆの 0
    2017/12/22 14:52:04

    我这里没有圆角,字体样式也有点问题。

        dongading0
        2017/12/22 15:48:02

        我js和css代码都没有压缩 就是为了方便大家修改   你可以调成自己想要的样子  我这只是一个例子

    回复
    得美 0
    2017/11/23 13:08:39

    如何在页面最开始时候执行呢

        得美0
        2017/11/23 13:31:32

        不能自适应吗?弹窗的位置?

        dongading0
        2017/12/21 16:25:57
        不好意思 最近有些忙 没太关注这个  自适应问题已修复 
    回复
    menli 0
    2017/11/9 14:37:34
    减肥的硕鼠 0
    2017/11/6 3:37:26

    好东西  不错!!

    回复
    せん へきけい 0
    2017/11/3 14:12:38
    (??ˇ?ˇ??) 0
    2017/10/25 16:38:05

    引入url不起作用哈,引入文件的正确姿势是什么

        licc_110
        2017/11/9 17:32:21
        var obj={
          type:"layer-fadeIn",
          title:"弹框标题",
          content:'<a href="http://www.*****.com">内容</a>',
        };
    回复
    Monstar 0
    2017/10/17 16:12:25
取消回复