简洁的jQuery弹窗插件dialog

所属分类:UI-弹出层,对话框

 57155  438  查看评论 (29)
分享到微信朋友圈
X
简洁的jQuery弹窗插件dialog ie兼容9

更新时间:2017/8/11 上午9:33:31

更新说明:

1. 添加按钮反色效果

2. 按钮宽度可设置与div宽度相等(就是单个按钮100%宽度,多个按钮50%宽度)

3. title的颜色与主题的颜色优化  设置为相同颜色

4. 添加close按钮 ,如果你一个弹窗有多个选择时可设置 


更新时间:2017/6/27 下午4:53:54

更新说明:

1. 优化当页面高度小于网页可视窗口高度 不执行showScroll方法 

2. 删除一个closeScroll方法 因为会影响关闭时 scroll的显示样式 并加以调整


更新时间:2017/6/15 上午10:14:23

更新说明:修改了一个插件属性名称bottons  换成了 buttons


更新时间:2017/6/5 下午3:33:14

更新说明:修复dailog 中 无动画效果的bug,浮层与弹窗的duration参数关联起来


更新时间:2017-5-24 21:30:09

更新说明:

  • 兼容animate

  • 原本的animateStyle被改成

  • animateIn:进入动画

  • animateOut:离开动画


dialog

一个小巧简约的弹窗插件

  • width:   弹窗的宽度   number

  • padding: 弹窗元素的 padding   字符串类型

  • title:   弹窗的title名称   字符串类型

  • discription:   弹窗的描述    字符串类型

  • borderRadius:    弹窗的圆角    字符串类型

  • bottons:   弹窗的按钮    数组类型  ['确定','取消']

  • maskBg:    浮层的背景色    字符串类型

  • dailogBg:   弹窗的背景色   字符串类型

  • type:   弹窗的样式   字符串类型   defalut   primary   success   danger   warning

  • zIndex:   弹窗的层级     number

  • hideScroll:    是否在弹窗的时候  关闭右侧的滚动条    bool

  • isBtnHasBgColor: bottons 是否有背景色   bool

  • showBoxShadow:   弹窗是否显示box-shadow    bool

  • animateStyle:    弹窗进入的动画   fadeInNoTransform   字符串类型

  • isInput:     是否显示文本输入框   bool

  • inputPlaceholder:   文本输入框的Placeholder的设置   字符串类型

回调

callBack:function(ret){}

返回值ret  ret.index 点击的索引, ret.input.status (如果有输入框为1,否则为0), ret.input.value  输入框的值

相关插件-弹出层,对话框

jQuery多功能图片弹窗插件pirobox

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

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 37485  436

超简单实用的弹窗jquery插件

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

jQuery html5爆裂式登录效果

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

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

    ЮЪ荒 0
    2019/4/24 8:35:55
    希望能有一个引入自定义html的Demo 回复
    ?? 0
    2019/1/15 8:07:26
    有没有使用的Demo
    回复
    小君栗子 0
    2018/7/20 10:00:02
    ie不支持啊,会报错 回复
    琅琊榜 0
    2018/5/4 8:59:19
    警示框如果点击确认,执行成功后需要再弹出一个成功的提示框,这个貌似不行啊 回复
    大包 0
    2018/3/21 17:06:49
    duration这个属性是干嘛的 加了这个属性手机页面就没效果 不加就可以 研究了很久
        未曾遗忘的青春1
        2018/3/21 17:48:56
        duration 是动画过度时间,Number数据类型 ,单位为 毫秒, 默认是500毫秒的过度时间
    回复
    七仔 0
    2018/1/7 21:40:49
    `Thouger-若无梦@ 0
    2017/11/26 13:00:22
    如何引入一个html页面? 回复
    幸福在路上》》 0
    2017/11/3 15:44:35

    回调函数我觉得应该优化下

        未曾遗忘的青春0
        2017/11/3 16:40:50

        你说该怎么优化   或者觉得哪里感觉不太好的   可以说出来的!

    回复
    小白 0
    2017/11/3 15:31:10

    rng,we饮恨4强好恨啊,我想引用你的 样式做一个alert弹出框是不是还要写函数触发事件。。

        未曾遗忘的青春0
        2017/11/3 15:35:54

        这是组件啊  一套的 js和css  

        小白0
        2017/11/3 16:15:00
        在头部引用给路径就能用嘛,没用过插件。。
    回复
    灭蚊子的小蚊香 0
    2017/10/6 14:11:23

    _getScrollWidth这个函数的作用是什么?

        未曾遗忘的青春1
        2017/10/11 9:38:51

        _getScrollWidth 是获取滚动条的宽度

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