pop弹出层

Pop是基于JQ编写的一个弹出层插件，其中使用了大量CSS3效果，内置了CSS样式无需再调用CSS样式，当然您也可以使用自己的CSS样式，扩展能力极强！
目前内置了 5个弹出层:
pop.alert()
pop.news()
pop.confirm()
pop.iframe()
pop.prompt()
9种动画显示效果，5种按钮样式，全部集成为一个js文件，只需要简单导入就可以使用。

开始使用~！ 点击下面按钮开始最简单体验

alert news confirm iframe prompt

pop.alert()

弹出提醒对话框层,与默认alert使用效果一致
使用方法：

pop.alert({ title: '这是一个标题', content: '这是我要提醒的内容', button: ['success','回执',function(){alert('回执')}], buttonSpcl: 'min|close', animation: 'layerFadeIn', width: 500, height: 180, id: 'ID-559', place: 5, drag: true, index: true, toClose: false, mask: false, class: ''})

快捷方法，只需要输入提醒内容即可。

pop.alert('你好，欢迎使用pop')

pop.news()

弹出延迟关闭提示层,常用于操作提示
使用方法：

pop.news({ content: '这是一个弹出层', id: 'id-77', place: 5, class: '', time: 10, animation: 'layerFadeIn'})

快捷方法，只需要输入提醒内容即可。

pop.news('你好，欢迎使用pop')

pop.confirm()

弹出选择对话框,与默认alert使用效果一致
使用方法：

pop.confirm({ title: '我是一个标题', content: '无论点击哪个都会提示对应按钮的回执', button: [['info', '确定', function(e){alert('你点击的确定');}], ['warning', '取消', function(e){alert('你点击的取消');pop.close(e)}] ], buttonSpcl: 'min|max|close', animation: 'layerFadeIn', width: 500, height: 180, id: 'ID-559', place: 5, drag: true, index: true, toClose: false, mask: false, class: '' })

快捷方法，只需要输入提醒内容即可与对应执行的操作，不需要操作默认操作关闭对话框。

pop.confirm('你好，欢迎使用pop', function(e){ alert('这个是确定的操作') }, function(e){ alert('这个是取消的操作') })

pop.iframe()

弹出iframe层
使用方法：

pop.iframe({ title: '百度一下你就知道', buttonSpcl: 'min|max|close', animation: 'layerFadeIn', width: 800, height: 500, id: 'ID-5338', place: 5, drag: true, dragSize:true, index: true, toClose: false, mask: true, class: '', src: 'http://www.baidu.com' })

快捷方法，只需要输入路径即可，尺寸默认 高50%宽50%的正方体层

pop.iframe('http://www.baidu.com')

pop.prompt()

弹出可输入的对话框层,与默认prompt使用效果一致,注意当行数等于1时 height属性有效，大于1则根据行数自适应高度
使用方法：

pop.prompt({ title: '请输入任何信息点击确定', placeholder: '请输入', buttonSpcl: false, button: [ ['primary', '确定',function(e){ alert('您输入的是：'+pop.getInput(e)); }], ['default', '取消'] ], animation: 'layerFadeIn', width: 400, height: 200, row: 1, id: 'ID-5338ss', place: 5, drag: true, index: true, toClose: false, mask: true, class: '' })

快捷方法，输入行数，提示信息与点击确定的操作取消默认为关闭

pop.prompt(10,'请输入用户信息',function(e){ alert('您输入用户信息的是：'+pop.getInput(e)); })

pop.custom()

弹出custom层,注意这个层没有快捷用法，只可以传入一个对象属性
可以理解为 自定义的一个弹出层，默认所有均为开启或者最大值。 使用方法：

pop.custom({ title: '* 公告', content: '

• 服务器开始升级，预计开启时间晚9点20分
• 本次升级，每个用户补偿5个悠悠币
• 开放注册 新增友好度系统
• 商场限时出售百万土豪礼包 飞天小仙子礼包 新人报到礼包

', button: ['info', '我知道了',pop.close], buttonSpcl: 'close', animation: 'layer-spread', width: 500, height: 400, id: 'pop-5555', place: 5, drag: false, dragSize: false, index: false, toClose: true, mask: true, class: 'custom' })

pop.cfg()

这是一个全局配置操作使用，主要设置层通用配置，这个函数必须在运行层之前执行一次即可生效，应用成功返回 true 否则 false。下面是默认值。
具体请查看对象属性,当然还有很多属性我没有归入这类，因为感觉没有必要。

alert(pop.cfg({className: 'pop',minWidth: 200,minHeight: 100,zIndex: 10000,boundary: 5,maxDrag: false,resize:true,win:false})?'修改配置成功':'修改配置失败')

pop.close()

这一个操作函数，用于关闭打开的层，其中必须传入一个id值，如果不传递则无效果。如果传入一个 'closeAll' 就会关闭所有pop层
一般用于于回执操作里面使用， 回执操作会传回层自身的ID值，也可以如操作2一样使用
为了查看效果 一律使用pop.custom 演示
使用方法1：

pop.custom({ width: 400, height: 200, content:'点击按钮关闭层', button:['info', '我知道了',function(e){ alert('回执操作，准备执行pop.close()\ne参数为:'+e); pop.close(e) }]});

使用方法2(先运行步骤1在运行步骤2)：
操作步骤1

pop.custom({ width: 100, height: 100, id:'php-4879', mask: false, drag: true, dragSize: false, })

操作步骤2，可以将ID改为【closeAll】，这样会关闭所有pop层

pop.close('php-4879')

pop.getInput()

这一个操作函数，用于获取层内input与textarea的val值，必须传入一个id值，如果不传递返回false
也可以用于返回pop层内所有的input与textarea的val值，如果存在多个则返回一个数组

pop.prompt(1,'pop.getInput()演示',function(e){ alert('输入的值'+pop.getInput(e));})

获取多input效果

var dir = '

'; pop.custom({ width: 400, height: 200, content:dir, button:['info', '我知道了',function(e){ var ary = pop.getInput(e); for(var key in ary){ alert(ary[key])} pop.close(e);}]})

按钮样式

6种按钮样式，其中ban是禁止的，这个样式添加任何操作都是无效的

ban primary default success info warning danger

动画

9种动画，为了简单一点 直接for一次性全部输出的了。

var ary=[ "slideFromTop", "slideFromBottom", "showSweetAlert", "layerFadeIn", "layer-fadeIn", "layer-fadeInUpBig", "layer-rollIn", "layer-shake", "layer-spread" ],i=1; for(var key in ary){ pop.alert({ title:"动画演示", animation:ary[key], content:"动画："+ary[key], place: i++}); }

关闭所有pop层

pop.close('closeAll');

对象属性

常见的：

title 标题 任意html

content 内容 任意html

button 按钮 必须以数组方式传入，多维数组则传入多个按钮

buttonSpcl 右上角功能按钮 可选 min max close三种 传入必须以【|】隔开

animation 动画类型

width 弹出层宽度

height 弹出层高度

id id，不输入则自定获取

place 定位类型，1-9 九宫格定位1左上9右下
也可以手动定位，需要传入一个对象属性top,left,bottom,right,对应css属性。

drag 拖动层的位置

dragSize 拖动层的大小

index 多个pop层时，被点击层置顶

toClose 点击层之外的元素关闭层

mask 背景遮罩层是否存在，当为数字时出现遮罩层并调整层透明度 0-1

class 追加css样式，类如 'abc',则实际追加样式为'pop-abc'

特殊的：

row pop.input()使用，用来设置行数，此数值也会影响层的高度

src pop.iframe()使用，用来设置src页面路径

time pop.news()使用，用来设置延迟关闭的时间

全局配置：

className 主要用于改变pop使用的样式名称，但是不影响使用效果。如果你不需要.pop开头样式则不需要改动他

minWidth 每个层最小宽度，最小化时也适用于这个宽度

minHeight 每个层最小高度

zIndex 同css z-index属性 默认值1W

boundary 层距离边界距离，主要为了层在窗口内。0则无效

maxDrag 最大化时是否拖动，如果为true 最好把boundary改为0 否则窗口拖动会一直抖动

resize 窗口变化是否检查层位置，如果不在窗口内则强制固定在窗口内

win 重写pop，可以直接alert()呼出，不需要在加pop. 注意，如果开始 系统默认alert则会强制改写为pop.alert()，为ture alert() pop.alert()均可呼出pop层