键: 值 描述
下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格。如是调用: $.layer({键: 值, 键: 值, …});
type: 0 层的类型。0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。

此为重要参数,不同类型层的总开关,若为type:0则不需要配置,其它类型层在调用时必须设置type。

title: '信息' 控制默认标题栏。                         如想自定义标题样式,可以 title: ['标题', 'background:#c00;'] //第二个参数可书写任意css                         如不想显示标题栏,配置title: false 即可                    
maxmin: false 是否输出窗口最小化/全屏/还原按钮。                         如需要开启,设置maxmin: true 即可                         此功能为layer1.8开始新增                    
offset: ['', ''] 控制层坐标。 offset的值分别是: [纵坐标, 横坐标],默认为垂直水平居中 如果您要设定纵坐标,可以:offset:['200px', '']/td>                
area: ['310px', '130px'] 控制层宽高。 area值分别为:[宽度, 高度] 当设置为auto时,意味着采用自适应(iframe层不能设置auto), 对于宽度,并不推荐您设置auto。
border: [10, 0.3, '#000'] 控制层的边框。 border的值分别为:[边框大小, 透明度, 颜色, layer1.8之前需在此处加true] 如果您不想显示border,设置 border: [0] 即可
shade: [0.5, '#000'] 控制遮罩。 值分别是:[遮罩透明度, 遮罩颜色, layer1.8之前需在此处加true] 如果不想显示遮罩,配置shade: [0]即可
shadeClose: false 用来控制点击遮罩区域是否关闭层。 若开启,设为true即可
closeBtn: [0, true] 控制层右上角关闭按钮。 closeBtn的值分别为: [关闭按钮的风格(支持0和1), true] 若不想显示关闭按钮,配置 closeBtn: false即可
time: 0 自动关闭等待秒数,整数值。 0表示不自动关闭,若3秒后自动关闭,time: 3即可
fix: true, 用于设定层是否不随滚动条而滚动,固定在可视区域。
move: '.xubox_title' 设定某个元素来实现对层的拖拽。 值为:用来拖拽的元素选择器 若不想拖拽,move: false即可
moveOut: false 用于控制层是否允许被拖出可视窗口外
moveType: 0 用于配置拖拽类型(layer1.7之前版本不支持) 默认为引导式拖动层,若值设为1,则直接拖动层
bgcolor: '#fff' 用于控制层的背景色 如果不想设置任何颜色,设置空字符即可。但是对于type:0的对话框层而言,始终都是白色
zIndex: 19891014 控制层堆叠顺序(即css的z-index)。整数值。 合理设置它,可以避免与其它插件的层级冲突
maxWidth: 400 最大宽度。整数值。 当area宽度设为auto时才有用。
fadeIn: 300, 用于控制层渐显弹出(layer1.7之前版本不支持) 值为毫秒数
btns: 1, 按钮的个数。提供了0-2的选择,设置0表示不输出按钮
btn: ['确定', '取消'], [按钮一的文本值 , 按钮二的文本值] 必须btns值大于0才有效
shift: '', 用于控制动画弹出 有七种选择:左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 如shift:'top' 表示从上动画弹出
dialog: {
type: 3,
msg: ''
}
信息框层模式提供的私有参数。使用时,按需配置即可                         type: 图标类型,提供了0-16的选择,也许有你喜欢的。 设置-1不显示图标                         msg: 信息框内容,重要参数                    
page: {
dom: '#id',
html: '',
url: '',
ok: function(datas){}
}
页面层模式私有参数。                         dom: 页面已存在的选择器                         html: 直接传入的html字符串。                         url: ajax请求地址。                         ok: ajax请求完毕后执行的回调,datas是异步传递过来的值。                         需要特别注意的是,dom、html、url只需设定其中一个就行,若配置html或url,你必须也配置宽高值。                    
iframe: {
src: '',
scrolling: 'auto'
}
                        iframe层模式私有参数。                         src: 要打开的网址。                         scrolling: 是否允许iframe出现滚动条,默认自动。允许:'yes',不允许:'no'                    
loading: {
type: 0
}
加载层私有属性。                         type: loading图标类型(提供了0-3的选择)。                         一般配合ajax使用                    
tips : {
msg: '',
follow: '#id',
guide: 0,
isGuide: true,
more: false,
style: ['', '']
}
                        tips提示层私有属性。                         msg: 提示内容。                         follow: 吸附目标选择器。                         guide: 指引方向(0:上,1:右,2:下,3:左)。                         isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon                         more: 是否允许多个tips                         style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值,为三角形的颜色。
回调函数
success: function(layero){

}
                    
层弹出成功后的回调函数.                         layero是回调传过来的当前层容器的实例,这意味着你可以对当前弹层进行dom操作                    
yes: function(index){}
                    
按钮一的回调函数                         index为当前层的索引,主要用来回调执行后,配合layer.close(index)来关闭层                    
no: function(index){}
                    
按钮二的回调函数                    
close: function(index){}
                    
层右上角关闭按钮的点击事件触发回调函数。                    
end: function(){}
                    
层被彻底关闭后执行的回调函数。                    
moveEnd: function(){}
                    
拖拽完毕触发的回调函数                    
min: function(layero){},
full: function(layero){},
restore: function(layero){}
分别为最小化、全屏、还原触发后的回调函数                         layero是当前层容器的实例                         layer1.8开始新增

http://sentsin.com/jquery/layer/

jquery-弹窗:layer的更多相关文章

  1. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  2. jQuery、layer实现弹出层的打开、关闭功能实例详解

    本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...

  3. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  4. jquery弹窗插件layer:layer.layui.com

    这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goo ...

  5. jquery 弹窗插件 layer 常见接口

    源自:https://www.cnblogs.com/teamobaby/p/3556584.html 常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述 ...

  6. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  7. 移动端弹窗 layer.js 使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  9. jquery的Layer弹出框操作

    在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...

  10. Jquery弹窗效果

    1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. 设置Eclipse的字体风格方式

    1:Eclipse版本号:3.7.0(汉化版) 假设eclipse已经打开 窗口--->首选项--->常规--->外观--->颜色和字体--->基本--->文字字体 ...

  2. 互斥对象 Mutex 和MFC中的CMutex

    互斥(Mutex)是一种用途非常广泛的内核对象.能够保证多个线程对同一共享资源的互斥访问.同临界区有些类似,只有拥有互斥对象的线程才具有访问资源的权限,由于互斥对象只有一个,因此就决定了任何情况下此共 ...

  3. LoadRunner用户行为模拟器 《第三篇》

    用户行为模拟器简称VU,VU通过运行VU脚本模拟了用户对软件的操作行为.VU是基于网络协议的.很明显,被测服务器是通过各种各样的网络协议与客户端打交道的.VU要“骗过”被测服务器,当然就要遵守这些协议 ...

  4. 【MySQL】MySQL锁和隔离级别浅析二 之 INSERT

    最近在整理线上性能时,发现一台线上DB出现两个insert产生的死锁问题 ------------------------ LATEST DETECTED DEADLOCK ------------- ...

  5. 智能手机取证利器再进化-UFED Cloud Analyzer

    智能手机在现代人生活中,和钱包,钥匙一样,成了不可或缺的生活必需品,举凡食衣住行育乐都需要携带随身使用,因此,智能手机里所存放的,就是一个人的生活缩影,只是人们多半不自知智能手机竟是如此贴心的为你/妳 ...

  6. PL/SQL Developer使用

    查询存储过程方法:1.右上角小百页 - 新建SQL窗口 - 复制存储过程名称 - 按住CTRL - 点击链接进入2.点击查询按钮(望远镜) - 文本查找输入名称 - 对象类型默认(函数.过程,包说明, ...

  7. SQL Server :DBLINK创建及使用

    Exec sp_droplinkedsrvlogin bvtwfld12,Null --若存在先刪除Exec sp_dropserver bvtwfld12EXEC sp_addlinkedserve ...

  8. windows phone上下文菜单ContextMenu的使用示例

    新建一个WP项目,命名为contextmenu,然后往界面拖入一个ListBox控件listBox1,接着切换到XAML代码界面设置其属性,代码如下 <ListBox Height=" ...

  9. 单列模式(data与business交互)

    public class CommentsBusiness //Business { #region 单列模式 private static CommentBusiness instance; pri ...

  10. silverlight 获取路径 config

    1.获取web.config配置内容: web.config default.aspx protected string InitParams { get; set; } InitParams = s ...