layui中layer的使用

layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首先交互方案，几乎随处可见。

layer可以独立使用，也可以通过Layui模块化使用。

场景	用前准备	调用方式
1. 作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。	通过script标签引入layer.js后，直接用即可。
2. layui 模块化使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js	通过layui.use('layer', callback)加载模块

 

 

基础参数

属性名	类型	默认值	描述
type	Number	0	layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title	String/Array/Boolean	'信息'	title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
content	String/DOM/Array	''	content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
skin	String	''	skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。
area	String/Array	'auto'	在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
offset	String/Array	垂直水平居中	offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：offset: 'auto';offset: '100px';offset: ['100px', '50px'];offset: 't';offset: 'lt';等。。。
icon	Number	-1（信息框）/0（加载层）	信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。
btn	String/Array	'确认'	信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推
btnAlign	String	r	你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。
closeBtn	String/Boolean	1	layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
shade	String/Array/Boolean	0.3	即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
shadeClose	Boolean	false	如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
time	Number	0	默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
id	String	空字符	设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
anim	Number	0	出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数
isOutAnim	Boolean	true	默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可
maxmin	Boolean	false	该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
fixed	Boolean	true	即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
resizing	Boolean	true	默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效
resizing	Function	null	当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象
scrollbar	Boolean	true	默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
maxWidth	Number	360	请注意：只有当area: 'auto'时，maxWidth的设定才有效。
maxHeight	Number	无	请注意：只有当高度自适应时，maxHeight的设定才有效。
zIndex		19891014	一般用于解决和其它组件的层叠冲突。
move	String/DOM/Boolean	.layui-layer-title'	默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽
moveOut	Boolean	false	默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可
moveEnd	Function	null	默认不会触发moveEnd，如果你需要，设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象
tips	Number/Array	2	tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
tipsMore	Boolean	false	允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
success	Function	null	当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。
yes	Function	null	该回调携带两个参数，分别为当前层索引、当前层DOM对象。
cancel	Function	null	该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可，
end	Function	null	无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
full/min/restore	Function	null	携带两个参数，即当前层 DOM、当前层索引
minStack	Boolean	true	是否默认堆叠在左下角

layer的方法

方法名	作用
layer.config(options)	初始化全局配置
layer.ready(callback)	初始化就绪
layer.open(options)	原始核心方法
layer.alert(content, options, yes)	普通信息框
layer.confirm(content, options, yes, cancel)	询问框
layer.msg(content, options, end)	提示框
layer.load(icon, options)	加载层
layer.tips(content, follow, options)	tips层
layer.close(index)	关闭指定层
layer.closeAll(type)	关闭所有层
layer.style(index, cssStyle)	重新定义层的样式
layer.title(title, index)	改变层的标题
layer.getChildFrame(selector, index)	获取iframe页的DOM
layer.getFrameIndex(windowName)	获取特定iframe层的索引
layer.iframeAuto(index)	指定iframe层自适应
layer.iframeSrc(index, url)	重置特定iframe url
layer.setTop(layero)	置顶当前窗口
layer.full()、layer.min()、layer.restore()	手工执行最大小化
layer.prompt(options, yes)	输入层
layer.tab(options)	tab层
layer.photos(options)	相册层