【jQuery】$.Pop()弹出层$.Pro()提示层插件介绍

admin

原文：http://www.jq22.com/yanshi17415

非常好的一款全免费插件，基于Jquery开发，值得推荐。

Pop是基于JQ编写的一个弹出层插件，其中使用了大量CSS3效果，内置了CSS样式无需再调用CSS样式，当然您也可以使用自己的CSS样式，扩展能力极强！
Pop预设的2个弹窗参数，分别是alert，confirm，均可回调。
1、$.Pop('你好，欢迎使用Pop插件','alert',function(){alert('点击确定的回调')})
2、$.Pop('你好，欢迎使用Pop插件,点击确定返回回调','confirm',function(){alert('点击确定的回调')})
3、$.Pop('slideFromTop效果',{Animation:'slideFromTop'})
预设9个动画,可惜的是需要CSS3的支持。如果不支持CSS3将没有动画效果。只需要配置Animation属性即可，动画代码在弹出层中

1. 
   
2. <input type="button" value="从上到下" onclick="$.Pop('slideFromTop效果',{Animation:'slideFromTop'})">
   
3. <input type="button" value="从下到上" onclick="$.Pop('slideFromTop效果',{Animation:'slideFromBottom'})">
   
4. <input type="button" value="弹性显示" onclick="$.Pop('slideFromTop效果',{Animation:'showSweetAlert'})">
   
5. <input type="button" value="渐入" onclick="$.Pop('slideFromTop效果',{Animation:'layerFadeIn'})">
   
6. <input type="button" value="从下向上2" onclick="$.Pop('slideFromTop效果',{Animation:'layer-fadeInUpBig'})">
   
7. <input type="button" value="翻转" onclick="$.Pop('slideFromTop效果',{Animation:'layer-rollIn'})">
   
8. <input type="button" value="渐入2" onclick="$.Pop('slideFromTop效果',{Animation:'layer-fadeIn'})">
   
9. <input type="button" value="晃动" onclick="$.Pop('slideFromTop效果',{Animation:'layer-shake'})">
   
10. <input type="button" value="横向扩展" onclick="$.Pop('slideFromTop效果',{Animation:'layer-spread'})">
    

复制代码

4、$.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(){},},
}
})
可以使用多个按钮，最多可以使用8个,每个按钮都可以绑定不同的事件。
vla配置按钮名称，class按钮样式，ope按钮事件
5、更多的配置选项
$.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:{}// 按钮
});
<input type="button" value="禁止拖动">
<input type="button" value="隐藏关闭按钮">
<input type="button" value="取消背景遮罩层">
<input type="button" value="叠加本页面预设的CSS样式">        

admin

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

1. <input type="button" value="有图片展示的" onClick="$.Pro('图片~！',{
   
2. Img:'http://www.jq22.com/tx/0.png'                  
   
3. })">
   
4. <input type="button" value="增加绑定事件" onClick="$.Pro('事件绑定效果',{
   
5. StartOn:function(){alert('这是插件开始前执行的操作')},         
   
6. EndOn:function(){alert('这是插件结束后执行的操作')}         
   
7. })">
   
8. <input type="button" value="完全不透明" onClick="$.Pro('完全不透明',{BoxBgopacity:1})">
   
9. <input type="button" value="几乎完全透明" onClick="$.Pro('几乎完全透明',{BoxBgopacity:0.1})">
   
10. <input type="button" value="完全透明带图片" onClick="$.Pro('',{BoxBgopacity:0,Img:'http://www.jq22.com/tx/0.png'})">

复制代码

复制内容可能有出错，以原文为准：http://www.jq22.com/yanshi17415

admin

动画CSS：
.showAlert[data-animation=layerFadeIn] { animation: layerFadeIn .3s; -webkit-animation: layerFadeIn .3s; -moz-animation: layerFadeIn .3s; -ms-animation: layerFadeIn .3s; -o-animation: layerFadeIn .3s }
.showAlert[data-animation=showSweetAlert] { animation: showSweetAlert .3s; -webkit-animation: showSweetAlert .3s; -moz-animation: showSweetAlert .3s; -ms-animation: showSweetAlert .3s; -o-animation: showSweetAlert .3s }
.showAlert[data-animation=none] { animation: none; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none }
.showAlert[data-animation=slideFromTop] { animation: slideFromTop .3s; -webkit-animation: slideFromTop .3s; -moz-animation: slideFromTop .3s; -ms-animation: slideFromTop .3s; -o-animation: slideFromTop .3s }
.showAlert[data-animation=slideFromBottom] { animation: slideFromBottom .2s; -webkit-animation: slideFromBottom .2s; -moz-animation: slideFromBottom .2s; -ms-animation: slideFromBottom .2s; -o-animation: slideFromBottom .2s }
.showAlert[data-animation=layer-fadeInUpBig] { animation: layer-fadeInUpBig .2s; -webkit-animation: layer-fadeInUpBig .2s; -moz-animation: layer-fadeInUpBig .2s; -ms-animation: layer-fadeInUpBig .2s; -o-animation: layer-fadeInUpBig .2s }
.showAlert[data-animation=layer-rollIn] { animation: layer-rollIn .3s; -webkit-animation: layer-rollIn .3s; -moz-animation: layer-rollIn .3s; -ms-animation: layer-rollIn .3s; -o-animation: layer-rollIn .3s }
.showAlert[data-animation=layer-fadeIn] { animation: layer-fadeIn .3s; -webkit-animation: layer-fadeIn .3s; -moz-animation: layer-fadeIn .3s; -ms-animation: layer-fadeIn .3s; -o-animation: layer-fadeIn .3s }
.showAlert[data-animation=layer-shake] { animation: layer-shake .3s; -webkit-animation: layer-shake .3s; -moz-animation: layer-shake .3s; -ms-animation: layer-shake .3s; -o-animation: layer-shake .3s }
.showAlert[data-animation=layer-spread] { animation: layer-spread .2s; -webkit-animation: layer-spread .2s; -moz-animation: layer-spread .2s; -ms-animation: layer-spread .2s; -o-animation: layer-spread .2s }

.hideAlert[data-animation=layer-spread] { animation: hide-spread .5s forwards; -webkit-animation: hide-spread .5s forwards; -moz-animation: hide-spread .5s forwards; -ms-animation: hide-spread .5s forwards; -o-animation: hide-spread .5s forwards }
.hideAlert[data-animation=slideFromTop] { animation: hideFromTop .2s forwards; -webkit-animation: hideFromTop .2s forwards; -moz-animation: hideFromTop .2s forwards; -ms-animation: hideFromTop .2s forwards; -o-animation: hideFromTop .2s forwards }
.hideAlert[data-animation=slideFromBottom] { animation: hideFromBottom .2s forwards; -webkit-animation: hideFromBottom .2s forwards; -moz-animation: hideFromBottom .2s forwards; -ms-animation: hideFromBottom .2s forwards; -o-animation: hideFromBottom .2s forwards }
.hideAlert[data-animation=showSweetAlert] { animation: hideSweetAlert .2s forwards; -webkit-animation: hideSweetAlert .2s forwards; -moz-animation: hideSweetAlert .2s forwards; -ms-animation: hideSweetAlert .2s forwards; -o-animation: hideSweetAlert .2s forwards }
.hideAlert[data-animation=layerFadeIn] { animation: hideFadeIn .2s forwards; -webkit-animation: hideFadeIn .2s forwards; -moz-animation: hideFadeIn .2s forwards; -ms-animation: hideFadeIn .2s forwards; -o-animation: hideFadeIn .2s forwards }
.hideAlert[data-animation=layer-fadeIn] { animation: hide-fadeIn .2s forwards; -webkit-animation: hide-fadeIn .2s forwards; -moz-animation: hide-fadeIn .2s forwards; -ms-animation: hide-fadeIn .2s forwards; -o-animation: hide-fadeIn .2s forwards }
.hideAlert[data-animation=layer-fadeInUpBig] { animation: hide-fadeInUpBig .2s forwards; -webkit-animation: hide-fadeInUpBig .2s forwards; -moz-animation: hide-fadeInUpBig .2s forwards; -ms-animation: hide-fadeInUpBig .2s forwards; -o-animation: hide-fadeInUpBig .2s forwards }
.hideAlert[data-animation=layer-rollIn] { animation: hide-rollIn .2s forwards; -webkit-animation: hide-rollIn .2s forwards; -moz-animation: hide-rollIn .2s forwards; -ms-animation: hide-rollIn .2s forwards; -o-animation: hide-rollIn .2s forwards }
.hideAlert[data-animation=layer-shake] { animation: hide-shake .2s forwards; -webkit-animation: hide-shake .2s forwards; -moz-animation: hide-shake .2s forwards; -ms-animation: hide-shake .2s forwards; -o-animation: hide-shake .2s forwards }

admin

jQuery.Pop = function (Html,Type,Callback)中Type设计，可以让函数拥有更灵活的参数累加，这个多参数灵活设计可以学习和借鉴。
var IType = Type ? Type instanceof Object ? Type : PopType[Type] || {} : {};
var Config = $.extend(true,{
    Title: "Message",
    Close: true,
    Animation: "layerFadeIn",
    BoxBg: true,
    BoxDrag: true,
    BoxBgopacity: 0.6,
    ZIndex: 99999,
    Class: false,
    Btn: {
        yes: { vla: "我知道了", class: "btn btn-primary", ope: function () { Close(); } }
    }
},IType);

以上楼层的技术已经升级，请使用楼下的新版本，功能更强大，函数写法也完全不一样。

admin

更详细的解述：http://xcdn.php.cn/js/jQuery/jQu ... BB%B6pop/index.html
最新的升级版：https://www.jq22.com/yanshi20539
无框架与广告：https://www.jq22.com/demo/jquerypop201811270105/

获取版本信息：pop.alert(pop.version)
为避免以上网站关闭，使用手册无法打开，特全部复制到本站，造福广大网友，未做样式整理，敬请理解。
本插件与文档来自作者yangSample,内容与弘帝站无关。
文档采用的完全本地化编写，并不会主动获取更新。获取更新的插件请访问www.JQ22.com搜索pop获取查看最新版本。

admin

几乎与window对象中的alert方法完全一致，唯一区别就是pop可以增加更多的按钮，点击事件等等。
在使用中要注意的是pop是以DOM元素制作的弹出层,pop不能像原生alert方法一样可以暂停代码执行。
来源：https://www.jq22.com/yanshi20539

如何使用
传参方式
pop.alert("设置标题", "修正标题",
function() {
this.close();
});
pop.alert("默认标题",
function() {
this.close();
})
[参数1 显示内容/string] [参数2 标题/string] [参数3 我知道了 按钮事件/function]
标题参数可以省略，按钮事件默认操作是销毁层。

对象方式
pop.alert({
title: "标题",
content: "内容",
button: ["success", "按钮",
function() {
alert("点击事件")
}],
buttonSpcl: "",
sizeAdapt: false,
anim: "fadeIn-zoom",
id: undefined,
width: 450,
height: 200,
place: 5,
drag: true,
index: true,
toClose: true,
mask: false,
class: false
});


对象属性
title - 标题
类型：String/Html/DOM，默认：

title支持传入字符串 DOM节点 JQ对象，在常见的层都会被p元素包裹住，一些特殊的层则不会被p元素包裹。

content - 内容
类型：String，默认：

content只可以传入字符串，并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

button - 按钮
类型：Array，默认：["primary","确定",function(){this.close();}]

弹出层按钮，必须以数组传入，需要多个按钮需要以多维数组格式传入。

单个按钮eval

pop.alert({
button: ["primary", "确定",
function() {
this.close();
}]
})
多个按钮eval

pop.alert({
button: [["primary", "确定1",
function() {
this.close();
}], ["primary", "确定2",
function() {
this.close();
}]]
})
buttonSpcl - 弹出层控制按钮
类型：String，默认：

弹出层控制按钮（最大化 最小化 关闭），必须传入字符串，可以使用3种格式传入：
1. min|max|close
2. min,max,close
3. min max close。

sizeAdapt - 自适应尺寸
类型：Boolean，默认：false

弹出层自适应尺寸，但是也会受到minWidth,maxWidth,minheight,maxheight 4个属性的影响。

anim - 动画效果
类型：String，默认：

弹出层动画效果，必须以字符串传入。

id - id值
类型：String，默认：

在3.0版本弹出层id已经是不重要的属性，只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

width - 弹出层宽度
类型：Number/%，默认：

设置弹出层宽度

height - 弹出层高度
类型：Number/%，默认：

设置弹出层高度

place - 定位
类型：Number/Object，默认：5

定位弹出层的位置，可以输入1-9九宫格位置，1为左上9为右下，也可以使用对象属性手动设置。

九宫格定位eval

pop.alert({
place: 1
})
多个按钮eval

pop.alert({
place: {
top: 0,
left: 0
}
})
drag - 注册拖动层事件
类型：Boolean，默认：

弹出层 注册移动位置事件，使弹出层按住标题可移动弹出层位置。

index - 注册置顶层事件
类型：Boolean，默认：

弹出层 注册置顶事件,当多个层存在时，点击层可置顶到顶层。

toClose - 注册层外销毁事件
类型：Boolean，默认：

弹出层 注册层外点击销毁事件，当在点击弹出层之外的元素时即可销毁层。

mask - 注册遮罩层
类型：Boolean/Number/String，默认：

为弹出层增加遮罩背景，默认黑色背景，传入值为数字时调整透明度，字符串则直接应用在background-color样式上。

class - 增加类名
类型：String，默认：

为弹出层增加一个类名，注意的是传入abc数值，但是最终附加上的是pop-abc类型，其中pop受到插件配置属性中className属性影响。

admin

pop 对象
当插件初始化完成后会自动注册pop对象到window中pop变量中，这里面包含了pop所有弹出层方法与操作方法，配置信息等。
codeeval

console.log(pop)
pop_layer 对象
每个弹出层都会返回一个实例化对象 pop_layer，pop_layer中包括了一些对弹出层操作。例如：销毁、注册别名、状态事件等，同时包括弹出层的配置信息与一些弹出层属性。
codeeval

pop.alert("使用扩展方法").mask();
mask就是弹出层返回的一个操作方法，既为当前层增加遮罩层，当然也可以在对象方式调用下直接赋予mask属性值为true也可以达到出现遮罩层的效果。

pop_Event 对象
在pop所有匿名方法（即是 按钮事件 状态事件等自定义方法）都会在参数中获取到pop_Event对象，pop_Event对象包括了当前层可使用的方法以及JQ对象（必须引入才可使用）DOM对象 等属性。
codeeval

pop.alert("pop_Event",
function(ev) {
console.log(this, ev)
});
这里参数ev和this是一致的，因为pop_Event对象的this指针已经改为ev上面。

调用方式
pop分别两种调用方式，一种是完整属性的对象方式调用，另外是部分属性的传参方式调用。
传参方式eval

pop.alert("传参");
对象方式eval

pop.alert({
content: "对象"
});
每次生成弹出层都会生成大量的默认属性，两种调用方式区别只是对这些默认属性覆盖。

问：可不可以以alert()调用pop层？ 答：可以 只需要注册到window即可，具体参考 更多实例 - 注册到window对象

弹出层类型
在pop中弹出分为注册类型，生成类型。注册类型是在某些行为触发后生成弹出层，这种弹出往往因为事件效果出现多个DOM元素。而生成类型只是一次性在Body中加入一个DOM元素，两种最大的区别还是在pop_layer对象上，注册类型只有配置信息和扩展方法，生成类型则有全部属性。
注册类型一般都是Reg结尾，比如img是生成一个图片预览的层，imgReg是注册点击图片使用pop查看这张图片。

admin

类似系统confirm()，可指定标题，内容。
可自定义大小、位置、动画效果等等。如果不需要则直接输入字符串与事件即可。
与pop.alert一样，pop.confirm并不能暂停代码运行，所以对需要用户选择的对话需要以回执方法的效果去执行，而不是直接if(confirm){} 就可以的。
如何使用
传参方式
codeeval

pop.confirm("设置标题", "修正标题",
function() {
alert("confirm")
},
function() {
this.close()
});
pop.confirm("默认标题",
function() {
alert("confirm")
},
function() {
this.close()
});
[参数1 显示内容/string] [参数2 标题/string] [参数3 确定 按钮事件/function] [参数4 取消 按钮事件/function]
标题参数可以省略，确定和取消按钮事件默认操作是销毁层。
对象方式
codeeval

pop.confirm({
title: "标题",
sizeAdapt: false,
content: "内容",
button: [["success", "按钮1",
function() {
alert("按钮1")
}], ["default", "按钮2",
function(e) {
alert("按钮2")
}]],
buttonSpcl: "",
anim: "fadeIn-zoom",
width: 450,
height: 180,
id: undefined,
place: 5,
drag: true,
index: true,
toClose: true,
mask: false,
class: false
});
对象属性
title - 标题
类型：String/Html/DOM，默认：

title支持传入字符串 DOM节点 JQ对象，在常见的层都会被p元素包裹住，一些特殊的层则不会被p元素包裹。

sizeAdapt - 自适应尺寸
类型：Boolean，默认：false

弹出层自适应尺寸，但是也会受到minWidth,maxWidth,minheight,maxheight 4个属性的影响。

content - 内容
类型：String，默认：

content只可以传入字符串，并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

button - 按钮
类型：Array，默认：["primary","确定",function(){this.close();}]

弹出层按钮，必须以数组传入，需要多个按钮需要以多维数组格式传入。

单个按钮eval

pop.alert({
button: ["primary", "确定",
function() {
this.close();
}]
})
多个按钮eval

pop.alert({
button: [["primary", "确定1",
function() {
this.close();
}], ["primary", "确定2",
function() {
this.close();
}]]
})
buttonSpcl - 弹出层控制按钮
类型：String，默认：

弹出层控制按钮（最大化 最小化 关闭），必须传入字符串，可以使用3种格式传入：
1. min|max|close
2. min,max,close
3. min max close。

anim - 动画效果
类型：String，默认：

弹出层动画效果，必须以字符串传入。

width - 弹出层宽度
类型：Number/%，默认：

设置弹出层宽度

height - 弹出层高度
类型：Number/%，默认：

设置弹出层高度

id - id值
类型：String，默认：

在3.0版本弹出层id已经是不重要的属性，只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

place - 定位
类型：Number/Object，默认：5

定位弹出层的位置，可以输入1-9九宫格位置，1为左上9为右下，也可以使用对象属性手动设置。

九宫格定位eval

pop.alert({
place: 1
})
多个按钮eval

pop.alert({
place: {
top: 0,
left: 0
}
})
drag - 注册拖动层事件
类型：Boolean，默认：

弹出层 注册移动位置事件，使弹出层按住标题可移动弹出层位置。

index - 注册置顶层事件
类型：Boolean，默认：

弹出层 注册置顶事件,当多个层存在时，点击层可置顶到顶层。

toClose - 注册层外销毁事件
类型：Boolean，默认：

弹出层 注册层外点击销毁事件，当在点击弹出层之外的元素时即可销毁层。

mask - 注册遮罩层
类型：Boolean/Number/String，默认：

为弹出层增加遮罩背景，默认黑色背景，传入值为数字时调整透明度，字符串则直接应用在background-color样式上。

class - 增加类名
类型：String，默认：

为弹出层增加一个类名，注意的是传入abc数值，但是最终附加上的是pop-abc类型，其中pop受到插件配置属性中className属性影响。

admin

类似系统prompt()，常常获取用户输入的信息。
如何使用
传参方式
codeeval

pop.prompt(true, "请输入信息", "标题",
function() {
alert(this.getText());
},
function() {
this.close();
});
[参数1 是否多行/boolean] [参数2 提示文字/string] [参数3 标题/function] [参数3 确定 按钮事件/function] [参数3 取消 按钮事件/function]
是否多行与标题参数可以省略，确定和取消按钮事件默认操作是销毁层。
密码效果eval

pop.prompt("pwd:请输入密码",
function() {
alert(this.getText())
});
在提示文字中开头加入pwd:就可以设置为***效果
对象方式
codeeval

pop.prompt({
title: "输入abc会得到回执效果",
placeholder: "abc",
row: true,
focus: true,
content: "恭喜您，您成功的运行了一次pop.confirm()。",
button: [["success", "演示效果，输入正确点击后提示 回执！",
function() {
if (this.getText() == "abc") {
alert("回执")
}
}], ["default", "取消，点击关闭",
function() {
this.close()
}]],
buttonSpcl: "",
anim: "fadeIn-zoom",
width: 450,
height: 180,
id: undefined,
place: 5,
drag: true,
index: true,
toClose: true,
mask: false,
class: false
});
具体属性请参考最下面的对象属性。
对象属性
title - 标题
类型：String/Html/DOM，默认：

title支持传入字符串 DOM节点 JQ对象，在常见的层都会被p元素包裹住，一些特殊的层则不会被p元素包裹。

placeholder - 提示文字
类型：Boolean，默认：

在prompt弹出层中用于设置默认提示文字，也用于设置是否已密码显示文本框

密码格式eval

pop.prompt({
placeholder: "pwd:请输入密码"
})
row - 单/多行
类型：Boolean，默认：

文本框显示样式为多行或单行

focus - 设置光标
类型：Boolean，默认：true

在prompt弹出层中用于设置是否光标在文本框中。

content - 内容
类型：String，默认：

content只可以传入字符串，并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

button - 按钮
类型：Array，默认：["primary","确定",function(){this.close();}]

弹出层按钮，必须以数组传入，需要多个按钮需要以多维数组格式传入。

单个按钮eval

pop.alert({
button: ["primary", "确定",
function() {
this.close();
}]
})
多个按钮eval

pop.alert({
button: [["primary", "确定1",
function() {
this.close();
}], ["primary", "确定2",
function() {
this.close();
}]]
})
buttonSpcl - 弹出层控制按钮
类型：String，默认：

弹出层控制按钮（最大化 最小化 关闭），必须传入字符串，可以使用3种格式传入：
1. min|max|close
2. min,max,close
3. min max close。

anim - 动画效果
类型：String，默认：

弹出层动画效果，必须以字符串传入。

width - 弹出层宽度
类型：Number/%，默认：

设置弹出层宽度

height - 弹出层高度
类型：Number/%，默认：

设置弹出层高度

id - id值
类型：String，默认：

在3.0版本弹出层id已经是不重要的属性，只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

place - 定位
类型：Number/Object，默认：5

定位弹出层的位置，可以输入1-9九宫格位置，1为左上9为右下，也可以使用对象属性手动设置。

九宫格定位eval

pop.alert({
place: 1
})
多个按钮eval

pop.alert({
place: {
top: 0,
left: 0
}
})
drag - 注册拖动层事件
类型：Boolean，默认：

弹出层 注册移动位置事件，使弹出层按住标题可移动弹出层位置。

index - 注册置顶层事件
类型：Boolean，默认：

弹出层 注册置顶事件,当多个层存在时，点击层可置顶到顶层。

toClose - 注册层外销毁事件
类型：Boolean，默认：

弹出层 注册层外点击销毁事件，当在点击弹出层之外的元素时即可销毁层。

mask - 注册遮罩层
类型：Boolean/Number/String，默认：

为弹出层增加遮罩背景，默认黑色背景，传入值为数字时调整透明度，字符串则直接应用在background-color样式上。

class - 增加类名
类型：String，默认：

为弹出层增加一个类名，注意的是传入abc数值，但是最终附加上的是pop-abc类型，其中pop受到插件配置属性中className属性影响。

历史变动
V3.0.0 按钮事件中的获取文本text属性改为了getText()方法。
扩展性
pop弹出层扩展性非常强，每个弹出层都可以单独设置更多效果。

admin

弹出一句话的即时提醒层，不同于pop.alert,pop.news更适合用来提示 让用户变懒又不得不接收的提示信息。
如何使用
传参方式
codeeval

pop.news("内容", 5000, "body", false);
[参数1 显示内容/string ] [参数2 显示时间/number] [参数3 指定父元素/string] [参数4 锁定唯一性/Boolean]
参数1 2不用过多解释，都是常用的属性，前者是显示文字后者是等待销毁的时间。参数3 为 这个信息出现在哪个父元素中，默认是body里面，参数4 则是每次调用会销毁之前同类型所有的层以锁定信息唯一性显示。
对象方式
codeeval

pop.news({
content: "内容",
id: undefined,
place: 5,
class: false,
time: 10000,
anim: "fadeIn-zoom",
box: "body",
only: true
});
在对象情况下，可以实现更多效果设置，当然也可以自己预设一个自定义方法调用pop.alert，这样可以灵活性与便捷性更强。
对象属性
content - 内容
类型：String，默认：

content只可以传入字符串，并且会被p元素包裹。如果需要传入html元素应该使用html对象属性

id - id值
类型：String，默认：

在3.0版本弹出层id已经是不重要的属性，只有需要搜索弹出层时候需要用一下。
Ps. 这是一个被抛弃的属性..

place - 定位
类型：Number/Object，默认：5

定位弹出层的位置，可以输入1-9九宫格位置，1为左上9为右下，也可以使用对象属性手动设置。

九宫格定位eval

pop.alert({
place: 1
})
多个按钮eval

pop.alert({
place: {
top: 0,
left: 0
}
})
class - 增加类名
类型：String，默认：

为弹出层增加一个类名，注意的是传入abc数值，但是最终附加上的是pop-abc类型，其中pop受到插件配置属性中className属性影响。

time - 延迟销毁
类型：Number，默认：3000

延时销毁pop层所需要等待的时间，单位 毫秒。既1秒为1000

anim - 动画效果
类型：String，默认：

弹出层动画效果，必须以字符串传入。

box - 在哪里出现
类型：String，默认："body"

用于设置弹出层出现在哪里，也就是弹出层加载到哪里。

only - 唯一性
类型：Boolean，默认：false

锁定弹出层在本类型层的唯一性，也就是每次调用层都会自动销毁上一个同类型的弹出层。
代码：Hondy.Designer.wwwroot.lib.poper.min.js