简洁的jQuery弹窗插件dialog

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

 10897  83  查看评论 (14)
简洁的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  输入框的值

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

强大的弹出框插件-FANCYBOX

fancyBox是一款优秀的弹出框Jquery插件。
  弹出层
 106267  163

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

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

jquery弹出框插件dialogbox

jquery弹出框插件dialogbox
  弹出层
 13780  31

超简单实用的弹窗jquery插件

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

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

    陈浩_21991 0
    2017/8/11 8:38:12

    希望能在弹窗右上角加上关闭的x的按钮,赞一个。

        未曾遗忘的青春0
        2017/8/11 9:35:49
        我之后又重新提交了一个版本   需要一点审核时间先贴出更新说明

        1. 添加按钮反色效果

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

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

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

        过两天应该就能下载了

    回复
    Water。 0
    2017/8/5 16:52:35
    站长,在点击出现弹窗之后,怎么设置点击弹窗中的确定按钮触发新事件?
        未曾遗忘的青春1
        2017/8/5 17:07:17
        $('body').dialog({
        	type:'warning',
        	showBoxShadow:true,
        	buttons:['回答一','回答二'],
        	discription:'你好吗?',
        	animateIn:'rotateInUpLeft-hastrans'
        	animateOut:'rotateOutUpLeft-hastrans'
        },function (ret){
        	if(ret.index === 0) {
        		alert('我很好')
        	} else {
        		alert('一般般吧')
        	}
        })

        按钮的点击事件在回调函数执行   ret  返回点击的数据  通过ret.index 来判断是确定或者是取消按钮

    回复
    卖女孩的小火柴 0
    2017/7/15 17:30:23

    我想怎么给 弹出文本框赋初始值   如果弹出两个以上文本框支不支持?

        未曾遗忘的青春0
        2017/7/15 17:40:24

        你好  这个是不支持的

    回复
    十八九岁 0
    2017/6/30 11:48:25

    这个内容怎么遍历数据改成checkbox

    回复
    tangchaen3597 0
    2017/6/29 11:53:51

    没有弹框的位置吗?

        未曾遗忘的青春0
        2017/6/29 14:32:06

        弹窗位置我自己设置的水平垂直居中的  , 如果你想自己设置的话  需要在css里面设置

    回复
    未曾遗忘的青春 0
    2017/6/20 11:58:26

    最新的dialog插件   把原来的bottons参数名称换成了 buttons  了

    回复
    ?清歌王子?? 0
    2017/6/7 21:34:40
    不会报错的err 0
    2017/5/26 17:24:08
    站长这个插件没有time时间函数,希望改进!!
        未曾遗忘的青春0
        2017/5/26 17:25:54

        啥意思?

        初秋繁花入?丶0
        2017/7/25 11:59:08

        就是和layer差不多的 time属性  控制显示的时长

    回复
取消回复