|

弹出层组件 🔥

弹出层组件 layer 是 Layui 最古老的组件，也是使用覆盖面最广泛的代表性组件。 layer 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用。

示例

点击下述按钮，查看每个示例对应的弹层效果。

在线测试

弹层类型

信息框

信息框即 dialog 类型层，对应默认的 type: 0，该类型的弹层同时只能存在一个。更多说明详见：#type

页面层

iframe 层

加载层

为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭

Tips 层

其他层

更多演示

主题风格

小贴士

事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。

API

API 描述
var layer = layui.layer 获得 layer 模块。
弹出 : -
layer.open(options) 打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装
layer.alert(content, options, yes) 弹出 dialog 类型信息框。
layer.confirm(content, options, yes, cancel) 弹出 dialog 类型询问框。
layer.msg(content, options, end) 弹出 dialog 类型提示框。
layer.load(icon, options) 弹出 loading 类型加载层。
layer.tips(content, elem, options) 弹出 tips 类型贴士层。
layer.prompt(options, yes) 弹出 page 类型输入框层。
layer.photos(options) 弹出 page 类型图片层。
layer.tab(options) 弹出 page 类型标签页层。
关闭 : -
layer.close(index, callback) 关闭对应的层，核心方法。
layer.closeAll(type, callback) 关闭所有对应类型的层。
layer.closeLast(type, callback) 2.8+ 关闭最近打开的对应类型的层。
其他 : -
layer.config(options) 全局配置默认属性。
layer.ready(callback) 样式初始化就绪。
layer.style(index, css) 重新设置弹层样式。
layer.title(title, index) 设置弹层的标题。
layer.getChildFrame(selector, index) 获取 iframe 页中的元素。
layer.getFrameIndex(window.name) 在 iframe 页中获取弹层索引。
layer.iframeAuto(index) 设置 iframe 层高度自适应。
layer.iframeSrc(index, url) 重新设置 iframe 层 URL。
layer.index 获取最新弹出层的索引
layer.zIndex 获取最新弹出层的层叠顺序
layer.setTop(layero) 将对应弹层的层叠顺序为置顶。
layer.full(index) 设置弹层最大化尺寸。
layer.min(index) 设置弹层最小化尺寸。
layer.restore(index) 还原弹层尺寸。

打开弹层

layer.open(options);

打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。

// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
var index = layer.open({
  type: 1, // page 层类型，其他类型详见「基础属性」
  content: '<div style="padding: 16px;">test</div>'
});

基础属性

属性名 描述 类型 默认值
type

弹层类型。 可选值有：

  • 0 dialog 信息框（默认），同时只能存在一个层
  • 1 page 页面层，可同时存在多个层
  • 2 iframe 内联框架层，可同时存在多个层
  • 3 loading 加载层，同时只能存在一个层
  • 4 tips 贴士层，可配置同时存在多个层

layer 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，layer 提供的所有的弹出方式均由此衍生。

 number

0
title

弹层标题。其值支持以下可选类型：

  • 若为 string 类型 : 则表示为弹层的标题文本，如：
title: '标题'
  • 若为 array 类型 : 则可设置标题文本和标题栏 CSS 样式：
 title: ['标题', 'font-size: 18px;']
  • 若为 boolean 类型 : 则可设为 false 不显示标题栏。
title: false // 不显示标题栏
string
array
boolean

信息

content

弹层内容。 可传入的值比较灵活，支持以下使用场景：

  • 若 type: 1（页面层）: 则 content 可传入值如下：
// 普通字符
layer.open({
  type: 1, 
  content: '传入任意文本或 HTML'
});
// 捕获页面已存在的 DOM 元素或 jQuery 对象
layer.open({
  type: 1,
  content: $('#id') // 捕获层
});

注意： 若采用捕获层，则捕获的元素必须存放在 <body> 根节点下，否则可能被父级容器的相对定位所影响。

  • 若 type: 2（iframe 层）: 则 content 可传入值如下：
// iframe URL
layer.open({
  type: 2, 
  content: 'http://cn.bing.com' // URL
}); 
// 是否屏蔽 iframe 滚动条
layer.open({
  type: 2, 
  // 数组第二个成员设为 no，即屏蔽 iframe 滚动条
  content: ['http://cn.bing.com', 'yes']
});
  • 若为其他弹层类型，传入普通字符即可。

相关效果可参考：#示例

area
设置弹层的宽高，其值支持以下可选类型：
  • 若为 array 类型，则可同时设置宽高
    • area: ['520px', '320px'] 固定宽度和高度
    • area: ['auto', '320px'] 宽度自动，高度固定
    • area: ['520px', 'auto'] 宽度固定，高度自动
  • 若为 string 类型，则可定义宽度和宽高均自适应：
    • area: '520px' 宽度固定，高度自适应
    • area: 'auto' 宽度和高度均自适应
 array
string

auto
maxWidth

弹层的最大宽度。当 area 属性设置宽度自适应时有效。

 number

360
maxHeight

弹层的最大高度。当 area 属性设置高度自适应时有效。

 number -

offset
弹层的偏移坐标。 支持以下可选值：
  • offset: 'auto' 坐标始终垂直水平居中
  • offset: '16px' 只设置垂直坐标，水平保持居中
  • offset: ['16px', '16px'] 设置垂直和水平坐标
  • offset: 't' 上边缘
  • offset: 'r' 右边缘
  • offset: 'b' 下边缘
  • offset: 'l' 左边缘
  • offset: 'rt' 右上角
  • offset: 'rb' 右下角
  • offset: 'lt' 左上角
  • offset: 'lb' 左下角

当设置边缘坐标时，可配合 anim 属性实现抽屉弹出效果。

 string
array

auto

anim
弹层的出场动画。支持以下可选值：
  • anim: 0 平滑放大。默认
  • anim: 1 从上掉落
  • anim: 2 从最底部往上滑入
  • anim: 3 从左滑入
  • anim: 4 从左翻滚
  • anim: 5 渐显
  • anim: 6 抖动

边缘抽屉动画 2.8+：

  • anim: 'slideDown' 从上边缘往下
  • anim: 'slideLeft' 从右边缘往左
  • anim: 'slideUp' 从下边缘往上
  • anim: 'slideRight' 从左边缘往右

抽屉动画一般配合 offset 属性实现边缘弹出。#详见示例

 number
string

0
isOutAnim

是否开启弹层关闭时的动画。

 boolean

true
maxmin

是否开启标题栏的最大化和最小化图标。

 boolean

false

closeBtn
是否开启标题栏的关闭图标，或设置关闭图标风格。
  • closeBtn: 0 不显示关闭图标
  • closeBtn: 1 关闭图标默认风格
  • closeBtn: 2 关闭图标风格二
 number

1

icon
提示图标。 信息框和加载层的私有参数。
  • 若为信息框，支持传入 0-6 的可选值。
    默认为 -1，即不显示图标。
  • 若为加载层，支持传入 0-2 的可选值
// eg1
layer.alert('成功提示', {icon: 1});
// eg2
layer.msg('开心表情', {icon: 6});
// eg3
layer.load(1); // 加载层风格一
number

-1

btn
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如： 
// eg1       
layer.confirm('询问框？', {
  btn: ['按钮1', '按钮2', '按钮3']
});
// eg2
layer.open({
  content: 'test',
  btn: ['按钮1', '按钮2', '按钮3'],
  // 按钮1 的回调
  btn1: function(index, layero, that){},
  btn2: function(index, layero, that){
    // 按钮2 的回调
    // return false // 点击该按钮后不关闭弹层
  },
  btn3: function(index, layero, that){
    // 按钮3 的回调
    // return false // 点击该按钮后不关闭弹层
  }
});
string -

btnAlign
按钮水平对其方式。支持以下可选值：
  • btnAlign: 'l' 按钮左对齐
  • btnAlign: 'c' 按钮水平居中对齐
  • btnAlign: 'r' 按钮右对齐。默认值，不用设置
 string

r

btnAsync 2.9.12+

异步按钮。开启之后，除 layer.prompt 的按钮外，按钮回调的返回值将支持 boolean | Promise<boolean> | JQueryDeferred<boolean> 类型，返回 false 或 Promise.reject 时阻止关闭。

注意，此时 yes 和 btn1(两者等效) 回调的默认行为发生了变化，即由触发时不关闭弹层变为关闭弹层。

var sleep = function (time) {
  return $.Deferred(function (defer) {
    setTimeout(function () {
      defer.resolve();
    }, time)
  })
}
// 下面以 confirm 层为例
layer.confirm('一个询问框的示例？', {
    btnAsync: true,
    btn: ['确定', '关闭'] // 按钮
  }, 
  function (index, layero, that) {
    var defer = $.Deferred();
    // 注: that.loading() 仅 btnAsync 开启后支持，参数为 boolean 类型，表示打开或关闭按钮的加载效果。
    that.loading(true);
    sleep(1000).then(defer.resolve);
    return defer.promise();
  }
);
boolean

false

skin
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
  • layui-layer-molv 墨绿主题
  • layui-layer-lan 深蓝主题
  • layui-layer-win10 Windows 10 主题 2.8+

还可传入其他任意 className 来自定义主题。 参考：#示例

 string -

shade
弹层的遮罩。 支持以下写法：
  • shade: 0.3 设置遮罩深色背景的透明度
  • shade: [0.3, '#FFF'] 设置遮罩透明度和颜色值
  • shade: 0 不显示遮罩
 number
array

0.3
shadeClose

是否点击遮罩时关闭弹层。当遮罩存在时有效。

 boolean

false
id

弹层的唯一索引值。 一般用于页面层或 iframe 层弹出时的状态识别，设置该属性可防止弹层的重复弹出。

 string -
hideOnClose 2.8.3+

关闭弹层时，是否将弹层设置为隐藏状态（而非移除），当再次打开，直接显示原来的弹层。 若设为 true，则必须同时设置 id 属性方可有效。

 boolean

false
time

弹层自动关闭所需的毫秒数。 如 time: 3000 ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。

 number

0
fixed

弹层是否固定定位，即始终显示在页面可视区域。

 boolean

true
zIndex

弹层的初始层叠顺序值。

 number

19891014
resize

是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。

 boolean

true
scrollbar

打开弹层时，是否允许浏览器出现滚动条。

 boolean

true
minStack 2.6+

点击标题栏的最小化时，是否从页面左下角堆叠排列。

 boolean

true
removeFocus 2.8+

是否移除弹层触发元素的焦点，避免按回车键时重复弹出。

 boolean

true
move

绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 move: false 禁止拖拽。 用法参考：#示例

 string
DOM
boolean		 -
moveOut

否允许拖拽到窗口外

 boolean

false
tips

设置 tips 层的吸附位置和背景色，tips 层的私有属性。

  • 若为 number 类型，则支持 1-4 的可选值，分别代表上右下左的吸附位置。如： tips: 1
  • 若为 array 类型，则支持设置吸附位置和背景色，如：
tips: [1, '#000'] // 吸附在上的深色贴士层
number
array

2
tipsMore

是否允许同时存在多个 tips 层，即不销毁上一个 tips。

 boolean

false

success
打开弹层成功后的回调函数。返回的参数如下： 
layer.open({
  type: 1,
  content: '内容',
  success: function(layero, index, that){
    // 弹层的最外层元素的 jQuery 对象
    console.log(layero);
    // 弹层的索引值
    console.log(index);
    // 弹层内部原型链中的 this --- 2.8+
    console.log(that);
  }
});

yes

点击「确定」按钮的回调函数。返回的参数同 success

layer.open({
  content: '内容',
  yes: function(index, layero, that){
    // do something
    layer.close(index); // 关闭弹层
  }
});

cancel
点击标题栏关闭按钮的回调函数。返回的参数同 `success` 
layer.open({
  content: '内容',
  cancel: function(index, layero, that){
    if(confirm('确定要关闭么')){
      layer.close(index);
    }
    return false; // 阻止默认关闭行为
  }
});

beforeEnd 2.9.11+
弹层被关闭前的回调函数。如果返回 false 或者 Promise.reject，将会取消关闭操作。 
layer.open({
  content: '<div style="padding: 32px;"><input id="id"/></div>',
  /** @type {(layero: JQuery, index: number) => boolean | JQueryDeferred<boolean> | Promise<boolean>} */
  beforeEnd: function(layero, index, that){
    return $.Deferred(function(defer){
      var el = layero.find('#id');
      var val = el.val().trim();
      if(val){
        layer.confirm('关闭后您填写的内容将不会得到保存，确定关闭吗？', function (i) {
          layer.close(i);
          defer.resolve(true)
        });
      }else{
        defer.resolve(true)
      }
    }).promise();
  }
});

end
弹层被关闭且销毁后的回调函数。 
layer.open({
  content: '内容',
  end: function(){
    console.log('弹层已被移除');
  }
});

moveEnd
弹层拖拽完毕后的回调函数。 
layer.open({
  type: 1,
  content: '内容',
  moveEnd: function(layero){
    console.log('拖拽完毕');
  }
});

resizing
弹层拉伸过程中的回调函数 
layer.open({
  type: 1,
  content: '内容',
  resizing: function(layero){
    console.log('拉伸中');
  }
});

full

弹层最大化后的回调函数。返回的参数同 success

layer.open({
  type: 1,
  content: '内容',
  full: function(layero, index, that){
    console.log('弹层已最大化');
  }
});

min

弹层最小化后的回调函数。返回的参数同 success

layer.open({
  type: 1,
  content: '内容',
  min: function(layero, index, that){
    // do something
    // return false; // 阻止默认最小化
  }
});

restore
弹层被还原后的回调函数。返回的参数同 `success` 
layer.open({
  type: 1,
  content: '内容',
  restore: function(layero, index, that){
    console.log('弹层已还原');
  }
});

弹出信息框

layer.alert(content, options, yes);

  • 参数 content : 弹出内容
  • 参数 options : 基础属性配置项。#详见属性
  • 参数 yes : 点击确定后的回调函数

该方法用于弹出 dialog 类型信息框（type: 0），参数自动向左补位。

// eg1
layer.alert('一个简单的信息框');
// eg2
layer.alert('开启图标', {icon: 1}, function(index){
  // do something
  // …
  layer.close(index);
});
// eg3
layer.alert('不开启图标', function(index){
  // do something
  // …
  layer.close(index);
});

弹出询问框

layer.confirm(content, options, yes, cancel);

  • 参数 content : 弹出内容
  • 参数 options : 基础属性配置项。#详见属性
  • 参数 yes : 点击确定后的回调函数
  • 参数 cancel : 点击第二个按钮（默认「取消」）后的回调函数

该方法用于弹出 dialog 类型询问框（type: 0），参数自动向左补位。

// eg1
layer.confirm('确定吗?', {icon: 3, title:'提示'}, function(index){
  // do something
  // …
  layer.close(index);
});
// eg2
layer.confirm('确定吗?', function(index){
  // do something
  // …
  layer.close(index);
});

弹出提示框

layer.msg(content, options, end);

  • 参数 content : 弹出内容
  • 参数 options : 基础属性配置项。#详见属性
  • 参数 end : 提示框关闭后的回调函数

该方法用于弹出 dialog 类型提示框（type: 0），默认 3 秒后自动关闭。参数自动向左补位。

// eg1
layer.msg('普通提示');
// eg2
layer.msg('带 icon 的提示', {icon: 6}); 
// eg3
layer.msg('关闭后想做些什么', function(){
  // do something
}); 
// eg
layer.msg('提示框', {
  icon: 1,
  time: 2000 // 设置 2 秒后自动关闭
}, function(){
  // do something
});

弹出加载层

layer.load(icon, options);

  • 参数 icon : 加载图标风格，支持 0-2 可选值
  • 参数 options : 基础属性配置项。#详见属性

该方法用于弹出 load 类型加载层（type: 3）。

// eg1
var index = layer.load(); // 默认加载图标风格
// eg2
var index = layer.load(1); // 加载图标风格 1
// eg3
var index = layer.load(2, {time: 10*1000}); // 加载图标风格，并设置最长等待 10 秒
// 关闭加载层
layer.close(index);

弹出贴士层

layer.tips(content, elem, options);

  • 参数 content : 弹出内容
  • 参数 elem : 吸附的目标元素选择器或对象
  • 参数 options : 基础属性配置项。#详见属性

该方法用于弹出 tips 类型贴士层（type: 4），默认 3 秒后自动关闭。

// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function(){
  var elem = this;
  layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
  tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
});

弹出输入框

layer.prompt(options, yes);

  • 参数 options : 基础属性配置项。除了支持 基础属性 之外，还支持下表私有属性：
私有属性 描述 类型 默认值
formType 输入框类型。支持以下可选值：
  • 0 文本输入框
  • 1 密令输入框
  • 2 多行文本输入框
number 0
value 输入框初始值 string -
maxlength 可输入的最大字符长度 number 500
placeholder 输入框内容为空时的占位符 string -
  • 参数 yes : 点击确定后的回调函数

该方法用于弹出输入框层，基于 type: 1（即 page 层）的自定义内容。 效果参考： #示例

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

弹出图片层

layer.photos(options);

  • 参数 options : 基础属性配置项。除了支持 基础属性 之外，还支持下表私有属性：
私有属性 描述 类型 默认值
photos 图片层的数据源，格式详见下述示例。 object -
toolbar 2.8.16+ 是否显示顶部工具栏 boolean true
footer 2.8.16+ 是否隐藏底部栏 boolean true
tab 图片层切换后的回调函数，返回的参数见下述示例 function -

该方法用于弹出图片层，基于 type: 1（即 page 层）的自定义内容。

用法一：直接赋值图片数据。 效果参考： #示例

layer.photos({
  photos: { // 图片层的数据源
    "title": "", // 相册标题
    "id": 123, // 相册 id
    "start": 0, // 初始显示的图片序号，默认 0
    "data": [   // 相册包含的图片，数组格式
      {
        "alt": "图片名",
        "pid": 666, // 图片id
        "src": "", // 原图地址
        "thumb": "" // 缩略图地址
      },
      // …
    ]
  },
  tab: function(data, layero){ // 图片层切换后的回调
    console.log(data); // 当前图片数据信息
    console.log(layero); // 图片层的容器对象
  }
});

用法二：绑定页面图片元素。点击图片时，弹出对应的图片层。

弹出标签层

layer.tab(options);

  • 参数 options : 基础属性配置项。除了支持 基础属性 之外，还支持下表私有属性：
私有属性 描述 类型 默认值
tab 标签层的数据源，格式详见下述示例。 array -

该方法用于弹出标签层，基于 type: 1（即 page 层）的自定义内容。 效果参考： #示例

layer.tab({
  area: ['600px', '300px'],
  tab: [{ // 标签层的数据源
    title: '标题 1', 
    content: '内容 1'
  }, {
    title: '标题 2', 
    content: '内容 2'
  }, {
    title: '标题 3', 
    content: '内容 3'
  }]
});

关闭弹层

layer.close(index, callback);

  • 参数 index : 打开弹层时返回的唯一索引
  • 参数 callback : 关闭弹层后的回调函数

该方法用于关闭对应的弹层。

// 每一种弹层调用方式，都会返回一个 index
var index1 = layer.open();
var index2 = layer.alert();
var index3 = layer.load();
var index4 = layer.tips();
// 关闭对应的弹层
layer.close(index1);

在 iframe 弹层页面中关闭自身

var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
parent.layer.close(index); // 再执行关闭

关闭所有层

layer.closeAll(type, callback);

  • 参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips
  • 参数 callback : 关闭弹层后的回调函数

该方法用于关闭所有同类型的弹层。

layer.closeAll(); // 关闭所有类型的层
layer.closeAll('dialog'); // 关闭所有的信息框
layer.closeAll('page'); // 关闭所有的页面层
layer.closeAll('iframe'); // 关闭所有的 iframe 层
layer.closeAll('loading'); // 关闭所有的加载层
layer.closeAll('tips'); // 关闭所有的 tips 层

关闭最近一次打开的层 2.8+

layer.closeLast(type, callback);

  • 参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips
  • 参数 callback 2.9+: 关闭弹层后的回调函数

该方法用于关闭最近一次打开的对应类型的层。

layer.closeLast('dialog'); // 关闭最近一次打开的信息框
layer.closeLast('page'); // 关闭最近一次打开的页面层
layer.closeLast('iframe'); // 关闭最近一次打开的 iframe 层
layer.closeLast('loading'); // 关闭最近一次打开的加载层
layer.closeLast('tips'); // 关闭最近一次打开的 tips 层
layer.closeLast(['dialog', 'page']); // 关闭最近一次打开的信息框或页面层，2.9.7+

全局配置默认属性

layer.config(options);

该方法用于全局设置弹层的默认基础属性。

layer.config({
  title: '默认标题',
  skin: '', // 设置默认主题
  // … 其他任意基础属性
})

样式初始化就绪

layer.ready(callback);

  • 参数 callback : 初始化完毕后的回调函数

该方法一般是在源码方式引入 layui.js，且要在页面初始即弹出层时使用，以确保弹层所依赖的样式文件先行加载。 而引入 release 版的 layui.js 则无需使用该方法，因为弹层样式已经统一合并到 layui.css 中。

// 页面初始弹出层
layer.ready(function(){
  layer.alert('对话框内容');
});

重新设置弹层样式

layer.style(index, css);

  • 参数 index : 打开弹层时返回的唯一索引
  • 参数 css : 要设置的 css 属性

该方法对 loading 层和 tips 层无效。

// 打开弹层
var index = layer.open({
  type: 1,
  content: '内容'
});
// 重新给对应层设定 width、top 等
layer.style(index, {
  width: '1000px',
  top: '10px'
});

设置弹层的标题

layer.title(title, index);

  • 参数 title : 标题
  • 参数 index : 打开弹层时返回的唯一索引
// 打开弹层
var index = layer.open({
  type: 1,
  content: '内容'
});
// 重新设置标题
layer.title('新标题', index)

获取 iframe 页中的元素

layer.getChildFrame(selector, index);

  • 参数 selector : iframe 子页面的选择器或元素对象
  • 参数 index : 打开弹层时返回的唯一索引

该方法用于在父页面获取 iframe 子页面中的元素

layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html',
  success: function(layero, index){
    // 获取 iframe 中 body 元素的 jQuery 对象
    var body = layer.getChildFrame('body', index);
    // 给 iframe 页中的某个输入框赋值
    body.find('input').val('Hello layer.');
  }
});

在 iframe 页中获取弹层索引

layer.getFrameIndex(window.name);

  • 参数 window.name : 当前 iframe 窗口的 name 属性值

该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。

var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
parent.layer.close(index); // 关闭当前 iframe 弹层

设置 iframe 层高度自适应

layer.iframeAuto(index);

  • 参数 index : 打开弹层时返回的唯一索引

该方法可让 iframe 高度跟随内容自适应

layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html',
  area: '600px', // 弹层初始宽度
  success: function(layero, index, that){
    layer.iframeAuto(index); // 让 iframe 高度自适应
    that.offset(); // 重新自适应弹层坐标
  }
});

重新设置 iframe 层 URL

layer.iframeSrc(index, url);

  • 参数 index : 打开弹层时返回的唯一索引
  • 参数 url : URL 地址
// 打开弹层
var index = layer.open({
  type: 2, // iframe 层
  content: '/layer/test/iframe.html'
}); 
// 重置 iframe 页面 URL
layer.iframeSrc(index, 'https://cn.bing.com/');

置顶弹层

layer.setTop(layero);

  • 参数 layero : layer 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。

该方法一般用于多弹层模式时，实现点击某个弹层让其层叠顺序置顶。效果参考：#示例

// 多弹层模式的层叠顺序置顶
layer.open({
  type: 1, // 页面层
  shade: false,
  area: ['520px', '320px'],
  maxmin: true,
  content: '<div style="padding: 16px;">多弹层模式的层叠顺序置顶</div>',
  zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
  success: function(layero){
    layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
  }
});

设置弹层最大化

layer.full(index);

  • 参数 index : 打开弹层时返回的唯一索引
// 打开弹窗
var index = layer.open({
  type: 1, // 页面层
  content: '弹层内容'
});
// 设置弹层最大化
layer.full(index);

设置弹层最小化

layer.min(index);

  • 参数 index : 打开弹层时返回的唯一索引
// 打开弹窗
var index = layer.open({
  type: 1, // 页面层
  content: '弹层内容'
});
// 设置弹层最大化
layer.min(index);

还原弹层

layer.restore(index);

  • 参数 index : 打开弹层时返回的唯一索引

当弹层最大化或最小化状态时，执行该方法可还原弹层。

贴士

layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。

Copyright © 2024 Layui MIT Licensed

鸣谢： 又拍云 Gitee iconfont