$.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样式叠加
});

仅供参考,后续会慢慢更新上更多的插件用法。
希望大家能够用到~!