基于jQuery的弹框插件plug-in.js

demo示例: file:///C:/Users/gzk12/Desktop/jqueryPlugPop/index.html

弹框有多种css样式和动画效果, 可以修改弹框提示层文字,按钮等. 可以添加弹框图片, 并且在弹框显示前

后都有回调函数.

// 官网示例: 做一次搬运工

$.Pop()介绍

Pop是基于JQ编写的一个弹出层插件，其中使用了大量CSS3效果，内置了CSS样式无需再调用CSS样式，当然您也可以使用自己的CSS样式，扩展能力极强！

Pop预设的2个弹窗参数，分别是alert，confirm，均可回调。

$.Pop('你好，欢迎使用Pop插件','alert',function(){alert('点击确定的回调')})

$.Pop('你好，欢迎使用Pop插件,点击确定返回回调','confirm',function(){alert('点击确定的回调')})

预设9个动画,可惜的是需要CSS3的支持。如果不支持CSS3将没有动画效果。只需要配置Animation属性即可，动画代码在弹出层中

$.Pop('slideFromTop效果',{Animation:'slideFromTop'})

可以使用多个按钮，最多可以使用8个,每个按钮都可以绑定不同的事件。
vla配置按钮名称，class按钮样式，ope按钮事件

$.Pop('按钮效果',{
Btn:{
yes:{vla:"",class:"",ope:function(){},},
no:{vla:"",class:"",ope:function(){},},
cancel:{vla:"",class:"",ope:function(){},},
bnt1:{vla:"",class:"",ope:function(){},},
bnt2:{vla:"",class:"",ope:function(){},},
bnt3:{vla:"",class:"",ope:function(){},},
bnt4:{vla:"",class:"",ope:function(){},},
bnt5:{vla:"",class:"",ope:function(){},},
}
})

更多的配置选项

$.Pop('按钮',{
Title:"来自Pop插件的通知",//标题
Close:true,//是否显示关闭按钮 true(开)/false(关)
Animation:"layerFadeIn",// 默认动画
BoxBg:true, // 是否显示遮罩背景层 true(开)/false(关)
BoxDrag:true, // 是否可以移动弹出层 true(开)/false(关)
BoxBgopacity:0.6, // 遮罩层的透明度 0-1 0完全透明1完全黑暗
ZIndex:99999, // 弹出层的cssz-index属性
Class:false, // 是否叠加css样式
Btn:{}// 按钮
});

下面是预设的CSS，只为看出区别所以随便写的，每行必须以!important强制使用为结尾。

.yushe{ background-color: #555!important; color:#fff!important; }
.yushe .box-title{ color:#fff!important; }

$.Pro()介绍

Pro是一个自动提醒的小插件，非常小巧，常常用于验证反馈使用

$.Pro('演示效果')

参数配置：
$.Pro('演示效果',{
Img:false,// 是否添加一个图片，添加格式，Img："img/a.jpg"
ImgWh:"150*150",// 图片大小格式,宽*高，默认100*100点击我查看原因
BoxBgopacity:0.8,//背景色的透明度 0为完全透明1为完全不透明
ZIndex:99999//css的z-index属性
Time:3,// 延迟关闭的时间
StartOn:false,// 插件开始时执行的事件，格式StartOn:function(){**你要执行的代码**}
EndOn:false,// 插件结束时执行的事件，格式StartOn:function(){**你要执行的代码**}
Class:false,// 叠加的CSS样式，用法与Pop样式叠加一直查看PopCSS样式叠加
});