layer 弹窗

关注

原创最新推荐文章于 2026-05-10 09:23:07 发布 6.2k 阅读 AI 写同款· GEO 优化 ›

Unity 基础之 Layer(层layer) 、LayerMask (遮罩层) 的总结和使用（CullingMask、Ray 射线的使用等） Unity 基础之 Layer(层layer) 、LayerMask (遮罩层) 的总结和使用（CullingMask、Ray 射线的使用等）目录 Unity 基础之 Layer(层layer) 、LayerMask (遮罩层) 的总结和使用（CullingMask、Ray 射线的使用等）一、简单介绍二、layer 层查看与创建 layer 层查 layer 层创建三、层的设置（手动设置和代码设置）层的手动设置层的代码设置四、LayerMask 的... 阅读详情

简介

layer 是layui的一个弹出层组件，但是可以作为独立组件使用。单独使用去layer官网下载独立组件包，并且需引入jQuery1.8以上版本。

引入好layer.js后，直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

基础参数

type：类型Number，0（信息框，默认），1（页面层），2（iframe层），3（加载层），4（tips层）
title：类型String/Array/Boolean，普通字符串改变文本，数组形式的第二个参数是css样式，布尔值是不显示标题
```
title: '我是标题'
title: ['文本', 'font-size:18px;']
title: false
```

content：类型String/DOM/Array，content的内容需要根据type类型变化。

/!* 如果是页面层 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

/!* 如果是iframe层 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

/!* 如果是用layer.open执行tips层 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

skin：类型String，不仅可以传入内置的样式class名，还可以传入自定的class，目前layer内置的skin有：layui-layer-lanlayui-layer-molv。
area：类型String/Array，默认情况下宽高是自适应的，想改变宽可以area: '500px'，宽高都要时area: ['500px','300px']。

offset：类型String/Array，默认垂直水平居中

值	备注
offset: ‘auto’	默认坐标，即垂直水平居中
offset: ‘100px’	只定义top坐标，水平保持居中
offset: [‘100px’, ‘50px’]	同时定义top、left坐标
offset: ‘t’	快捷设置顶部坐标

icon：类型Number，信息框和加载层的私有参数。-1（信息框），0（加载层）。信息框有默认图标0-6，加载层有0-2。

bth：类型String/Array，默认’确认’。定义多个按钮可以btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，按钮2开始是btn2: function(){}

//eg2
layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

btnAlign：类型String，按钮排列，默认右对齐。有’l’,‘c’,'r’三种，分别是左中右。
closeBtn：类型String/Boolean，右上角的关闭x按钮，有两种风格1和2，0是个奇怪的东西，可以用false表示不显示。
shade：类型String/Array/Boolean，默认0.3。即弹出层外的区域变暗，默认是0.3透明度的黑(’#000’)，定义别的颜色可以shade: [0.8, '#393D49']，不显示遮罩可以shade: 0。
shadeClose：类型Boolean，默认关闭。用于控制能否点击弹窗外关闭弹窗。
time：类型Number，默认0。自动关闭时间，单位毫秒(ms)。
id：类型String，设置该值后不管什么类型的弹窗都只允许弹出一个，常用于页面层和iframe层模式。
anim：类型Number，默认0。弹出动画，采用CSS3，有0-6七种模式，不想显示动画设置为-1。0就挺好的，别的适用于特殊场景。
isOutAnim：类型Boolean，默认true。关闭弹窗时的过度动画，可以设置false关闭。区别不是很大，本身动画就比较克制。
maxmin：类型Boolean，默认false。该参数仅对type: 1和type: 2有效，添加最大最小化按钮。
fixed：类型Boolean，默认true。设定弹出窗口是否固定在屏幕中，不会随着滚轮移动。
resize：类型Boolean，默认true。是否允许通过右下角拉伸窗口。该参数对loading,tips层无效。
resizing：类型Function。监听窗口拉伸动作，当拉伸窗口时执行回调函数，函数参数是当前层的DOM对象
```
resizing: function(layero){
  console.log(layero);
}   
```
scrollBar：类型Boolean，默认true。是否允许背景窗口滚动。
maxWidth，maxHeight：类型Number。只有当area: 'auto'时才生效。
zIndex：层叠顺序，用于解决与其他组件的层叠冲突。
move：类型String/DOM/Boolean，默认’layui-layer-title’。触发拖拽的元素，可以用指定元素选择器或DOM，还可以配置false来禁止拖拽。
moveOut：类型Boolean，默认false。是否允许拖拽到窗口外。
moveEnd：类型Function。拖动完毕后的回调方法，使用同上面的resizing。
tips：类型Number/Array，默认2。tips层的私有方法，从元素的上右下左四个方向出现，还可以定制颜色tips: [1, '#c00']。
tipsMore：类型Boolean，默认false。是否允许多个tips存在。

success：类型Function。在层创建完毕后的回调方法。携带参数分别是当前层DOM和当前层索引。

layer.open({
  content: '测试回调',
  success: function(layero, index){
    console.log(layero, index);
  }
});

yes：类型Function。确定按钮的回调方法。携带参数分别是当前层索引和当前层DOM。

layer.open({
  content: '测试回调',
  yes: function(index, layero){
    //do something
    layer.close(index); //如果设定了yes回调，需进行手工关闭
  }
});

cancel：类型Function。右上角关闭按钮的回调方法，携带参数分别是当前层索引和当前层DOM。

cancel: function(index, layero){ 
  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
    layer.close(index)
  }
  return false; 
}

end：类型Function。层销毁后的回调方法，不管是确定还是关闭都调用。不携带参数。
full，min，restore：类型Function。最大化、最小化、还原的回调方法。携带一个参数，当前层DOM。

内置方法

layer.config(options)：初始化全局配置。一个既可以重要也不重要的方法。平常不怎么用，但是很有用。
```
layer.config({
  anim: 1, //默认动画风格
  skin: 'layui-layer-molv' //默认皮肤
  …
});
```
layer.ready(callback)：在需要页面一打开就出现弹层时，最好将弹层放在ready方法里。毕竟加载总需要时间。
```
//页面一打开就执行弹层
layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});      
```
layer.open(options)：创建层的方法。options就是上面的基本参数。

layer.alert(content, options, yes)：普通信息框。类似原生的弹窗，但是使用更加灵活，options就是基本参数。并且参数能够自动向左补齐（能跳过一些参数）。

//eg1
layer.alert('只想简单的提示');        
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){ //可以跳过第二个参数直接写回调函数
  //do something
  
  layer.close(index);
});

layer.confirm(content, options, yes, cancel)：类似系统confirm但远胜confirm。需要把交互语句放在回调体里。同样是参数自动向左补齐。
```
//eg2
layer.confirm('is not?', function(index){
  //do something
  
  layer.close(index);
});   
```

layer.msg(content, options, end)：作者用心做的提示框。默认三秒后自动消失。参数自动补齐。

layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
  //do something
});

layer.load(icon, options)：type:3的深度定制。load默认是不关闭的，因为一般在ajax回调体中关闭。

layer.tips(content, follow, options)：type:4的深度定制。和msg一样低调，能够智能定位，知道该出现在哪里。默认是在元素右边弹出

//eg 2
$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
});
//eg 3
layer.tips('在上面', '#id', {
  tips: 1
});

layer.close(index)：关闭特定层。获取index的方式如下。

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一种弹层调用方式，都会返回一个index
layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可
 
//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
 
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

layer.closeAll()：简单粗暴，关闭所有层。可以通过指定类型关闭特定类型。

layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层

layer.style(index, cssStyle)：重新定义层的样式，对load层和tips层无效。
layer.title(title, index)：更改层的标题。
layer.getChildFrame(selector, index)：在当前页视图获取iframe页的DOM时使用。
layer.getFrameIndex(windowName)：获取特定iframe层的索引，一般在iframe关闭自身时用到。
layer.iframeAuto(index)：指定iframe层高度自适应。
layer.iframeSrc(index, url)：重置特定iframe url。
layer.setTop(layero)：在多个窗口打开时，通过点击窗体能置顶当前窗口。
layer.full()、layer.min()、layer.restore()：在自定义元素上触发最大小化

其他内置层

layer.prompt(options, yes)：输入层。参数自动向左补齐，yes方法携带参数value 表单值，index 索引，elem 表单元素

//例子2
layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

layer.tab(options)：tab层。只定义了一个成员tab: []，呈现出一个多标签的弹窗。

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});

layer.photos(options)：相册层。支持传入json和直接读取页面图片两种方式。传入json需按照指定格式。photos还有个tab回调方法，切换图片时触发。

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>
 
<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  ,tab: function(pic, layero){
       console.log(pic) //当前图片的一些信息
     }
}); 
</script>