demo示例: 

    弹框有多种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样式叠加
});