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

所属分类:UI-弹出层

 43913  340  查看评论 (43)
分享到微信朋友圈
X
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弹出层插件gallery

这是一个图片弹出层
  弹出层
 33229  291

表格鼠标移入同行同列变色(原创)

jQuery表格鼠标移入后同行同列变色
  弹出层
 20585  268

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 89760  394

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 45588  279

讨论这个项目(43)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    . 0
    2020/8/15 18:08:31
    时间 参数没有吗 回复
    0
    2019/10/23 15:33:50
    btn:[0,"确定"],想确定键是蓝色,但是按了没有反应 有没有办法在回调函数中关闭提示框 或者把btn:["确定",0]的确定键变为蓝色
    回复
    华师_徐国锋 0
    2018/11/26 21:45:01
    弹出层里面的东西不能被点击吗?我的弹出层里面放一个抽奖转盘,点击抽奖无效。我已经按照动态生成的元素的绑定方法来绑定click事件了 回复
    逗比在长大_为了500W 0
    2018/5/23 18:03:16
    不知道能不能用的~感觉不错 回复
    感应 0
    2018/4/22 7:50:06
    弹框主要内容如果使用url,能不能给个示例代码,谢谢 回复
    感应 0
    2018/4/21 22:32:16

    url 引入文件不管用,路径肯定没问题,是不是这么写不正确呢?

    type:"slideFromBottom",
    //有title属性的话,则有标题,标题内容为title值,无title属性则无标题
    title:"弹框标题",
    url:"a.html",
        dongading1
        2018/5/23 18:07:16
        html内容 只需要写弹框里需要用到的标签元素 如<div class="con">弹框内容</div>
        不需要写html、head、body等标签
        不好意思,才看到评论
    回复
    闭眼、思回忆 0
    2018/4/18 16:01:15
    有关闭弹框时的回调函数吗
        dongading1
        2018/4/18 16:15:31
        有的 配置说明里有说 callBack1 callBack2
    回复
    闭眼、思回忆 0
    2018/4/18 15:09:40
    url 引入文件之后,可以给引入的文件传入参数吗 回复
    My GD. 0
    2018/4/2 11:17:26
    求发我一份,qq576412694
        Aries0
        2019/3/13 9:44:01
        +1,邮箱:847678147@qq.com
    回复
    春天的花开秋天的风 0
    2018/1/12 11:48:23

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

        dongading0
        2018/1/22 15:54:30

        请确认路径 路径对的话是没问题的

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复