Layui快速入门之第十一节弹出层

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

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)	关闭对应的层，核心方法。
layer.closeAll(type)	关闭所有对应类型的层。
layer.closeLast(type) 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);

参数 options : 基础属性配置项。#详见属性

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

javascript 复制代码

// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
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` 类型 : 则表示为弹层的标题文本，如： 1. `title: '标题'` * 若为 `array` 类型 : 则可设置标题文本和标题栏 CSS 样式： 1. `title: ['标题', 'font-size: 18px;']` * 若为 `boolean` 类型 : 则可设为 `false` 不显示标题栏。 1. `title: false // 不显示标题栏`	string array boolean	`信息`
content	弹层内容。可传入的值比较灵活，支持以下使用场景： * 若 `type: 1`（页面层）: 则 `content` 可传入值如下： 1. `// 普通字符` 2. `layer.open({` 3. `type: 1,` 4. `content: '传入任意文本或 HTML'` 5. `});` 6. `// 捕获页面已存在的 DOM 元素或 jQuery 对象` 7. `layer.open({` 8. `type: 1,` 9. `content: $('#id') // 捕获层` 10. `});` 注意：若采用捕获层，则捕获的元素必须存放在 `<body>` 根节点下，否则可能被父级容器的相对定位所影响。 * 若 `type: 2`（iframe 层）: 则 `content` 可传入值如下： 1. `// iframe URL` 2. `layer.open({` 3. `type: 2,` 4. `content: 'http://cn.bing.com' // URL` 5. `});` 6. `// 是否屏蔽 iframe 滚动条` 7. `layer.open({` 8. `type: 2,` 9. `// 数组第二个成员设为 no，即屏蔽 iframe 滚动条` 10. `content: ['http://cn.bing.com', 'yes']` 11. `});` * 若为其他弹层类型，传入普通字符即可。相关效果可参考：#示例
area	设置弹层的宽高，其值支持以下可选类型： * 若为 `array` 类型，则可同时设置宽高 * `area: ['520px', '320px']` 固定宽度和高度 * `area: ['auto', '320px']` 宽度自动，高度固定 * `area: ['520px', 'auto']` 宽度固定，高度自动 * 若为 `string` 类型，则可定义宽度和宽高均自适应： * `area: '520px'` 宽度固定，高度自适应 * `area: 'auto'` 宽度和高度均自适应	array string	`auto`
maxWidth	弹层的最大宽度。当 `area` 属性值为默认的 `auto'` 时有效。	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	是否开启标题栏的最大化和最小化图标。	array	`false`
closeBtn	是否开启标题栏的关闭图标，或设置关闭图标风格。 * `closeBtn: 0` 不显示关闭图标 * `closeBtn: 1` 关闭图标默认风格 * `closeBtn: 2` 关闭图标风格二	number	`1`
icon	提示图标。信息框和加载层的私有参数。 * 若为信息框，支持传入 `0-6` 的可选值。默认为 `-1`，即不显示图标。 * 若为加载层，支持传入 `0-2` 的可选值 1. `// eg1` 2. `layer.alert('成功提示', {icon: 1});` 3. `// eg2` 4. `layer.msg('开心表情', {icon: 6});` 5. `// eg3` 6. `layer.load(1); // 加载层风格一`	number	`-1`
btn	自定义按钮。页面层默认不开启。按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如： 1. `// eg1` 2. `layer.confirm('询问框？', {` 3. `btn: ['按钮1', '按钮2', '按钮3']` 4. `});` 5. `// eg2` 6. `layer.open({` 7. `content: 'test',` 8. `btn: ['按钮1', '按钮2', '按钮3'],` 9. `// 按钮1 的回调` 10. `btn1: function(index, layero, that){},` 11. `btn2: function(index, layero, that){` 12. `// 按钮2 的回调` 13. `// return false // 点击该按钮后不关闭弹层` 14. `},` 15. `btn3: function(index, layero, that){` 16. `// 按钮3 的回调` 17. `// return false // 点击该按钮后不关闭弹层` 18. `}` 19. `});`	string	-
btnAlign	按钮水平对其方式。支持以下可选值： * `btnAlign: 'l'` 按钮左对齐 * `btnAlign: 'c'` 按钮水平居中对齐 * `btnAlign: 'r'` 按钮右对齐。默认值，不用设置	string	`r`
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`
time	弹层自动关闭所需的毫秒数。如 `time: 3000` ，即代表 3 秒后自动关闭。提示框、加载层、Tips 层三种弹出模式默认开启。	number	`0`
id	弹层的 ID 值。一般用于防止页面层或 iframe 层的重复弹出。	string	-
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` 类型，则支持设置吸附位置和背景色，如： 1. `tips: [1, '#000'] // 吸附在上的深色贴士层`	number array	`2`
tipsMore	是否允许同时存在多个 tips 层，即不销毁上一个 tips。	boolean	`false`
回调函数
success	打开弹层成功后的回调函数。返回的参数如下： 1. `layer.open({` 2. `type: 1,` 3. `content: '内容',` 4. `success: function(layero, index, that){` 5. `// 弹层的最外层元素的 jQuery 对象` 6. `console.log(layero);` 7. `// 弹层的索引值` 8. `console.log(index);` 9. `// 弹层内部原型链中的 this --- 2.8+` 10. `console.log(that);` 11. `}` 12. `});`
yes	点击「确定」按钮的回调函数。返回的参数同 `success` 1. `layer.open({` 2. `content: '内容',` 3. `yes: function(index, layero, that){` 4. `// do something` 5. `layer.close(index); // 关闭弹层` 6. `}` 7. `});`
cancel	点击标题栏关闭按钮的回调函数。返回的参数同 `success` 1. `layer.open({` 2. `content: '内容',` 3. `cancel: function(index, layero, that){` 4. `if(confirm('确定要关闭么')){` 5. `layer.close(index);` 6. `}` 7. `return false; // 阻止默认关闭行为` 8. `}` 9. `});`
end	弹层被关闭且销毁后的回调函数。 1. `layer.open({` 2. `content: '内容',` 3. `end: function(){` 4. `console.log('弹层已被移除');` 5. `}` 6. `});`
moveEnd	弹层拖拽完毕后的回调函数。 1. `layer.open({` 2. `type: 1,` 3. `content: '内容',` 4. `moveEnd: function(layero){` 5. `console.log('拖拽完毕');` 6. `}` 7. `});`
resizing	弹层拉伸过程中的回调函数 1. `layer.open({` 2. `type: 1,` 3. `content: '内容',` 4. `resizing: function(layero){` 5. `console.log('拉伸中');` 6. `}` 7. `});`
full	弹层最大化后的回调函数。返回的参数同 `success` 1. `layer.open({` 2. `type: 1,` 3. `content: '内容',` 4. `full: function(layero, index, that){` 5. `console.log('弹层已最大化');` 6. `}` 7. `});`
min	弹层最小化后的回调函数。返回的参数同 `success` 1. `layer.open({` 2. `type: 1,` 3. `content: '内容',` 4. `min: function(layero, index, that){` 5. `// do something` 6. `// return false; // 阻止默认最小化` 7. `}` 8. `});`
restore	弹层被还原后的回调函数。返回的参数同 `success` 1. `layer.open({` 2. `type: 1,` 3. `content: '内容',` 4. `restore: function(layero, index, that){` 5. `console.log('弹层已还原');` 6. `}` 7. `});`

弹出信息框

layer.alert(content, options, yes);

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

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

javascript 复制代码

// 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），参数自动向左补位。

java 复制代码

// 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 秒后自动关闭。参数自动向左补位。

javascript 复制代码

// 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）。

javascript 复制代码

// 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 秒后自动关闭。

javascript 复制代码

// 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`

参数 yes : 点击确定后的回调函数

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

javascript 复制代码

// 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	-
tab	图片层切换后的回调函数，返回的参数见下述示例	function	-

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

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

javascript 复制代码

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); // 图片层的容器对象
  }
});

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

html 复制代码

<style>
.class-photos-demo img{width: 160px; height: 100px; cursor: pointer;}
</style>
<div id="ID-photos-demo" class="class-photos-demo">
  <!-- <img src="缩略图" layer-src="大图地址" layer-pid="图片id，可不写" alt="图片名"> -->
  <img src="https://unpkg.com/outeres/demo/layer.png" layer-src="https://unpkg.com/outeres/demo/layer.png" layer-pid="" alt="layer">
  <img src="https://unpkg.com/outeres/demo/000.jpg" layer-src="https://unpkg.com/outeres/demo/000.jpg" layer-pid="" alt="壁纸">
  <img src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-pid="" alt="星空如此深邃">  
</div>
<script>
layui.use(function(){
  var layer = layui.layer;
  // 图片层
  layer.photos({
    photos: '#ID-photos-demo'
  }); 
});
</script>

弹出标签层

layer.tab(options);

参数 options : 基础属性配置项。除了支持基础属性之外，还支持下表私有属性：

私有属性	描述	类型	默认值
tab	标签层的数据源，格式详见下述示例。	array	-

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

java 复制代码

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

关闭弹层

layer.close(index);

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

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

java 复制代码

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

在 iframe 弹层页面中关闭自身

java 复制代码

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

关闭所有层

layer.closeAll(type);

参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips

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

java 复制代码

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

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

layer.closeLast(type);

参数 type : 弹层的类型。可选值：dialog,page,iframe,loading,tips

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

java 复制代码

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

全局配置默认属性

layer.config(options);

参数 options : 基础属性配置项。

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

java 复制代码

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

样式初始化就绪

layer.ready(callback);

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

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

java 复制代码

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

重新设置弹层样式

layer.style(index, css);

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

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

java 复制代码

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

设置弹层的标题

layer.title(title, index);

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

java 复制代码

// 打开弹层
var index = layer.open({
  type: 1,
  content: '内容'
});
// 重新设置标题
layer.title('新标题', index)

获取 iframe 页中的元素

layer.getChildFrame(selector, index);

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

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

java 复制代码

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 弹层的索引，以便关闭自身。

java 复制代码

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

设置 iframe 层高度自适应

layer.iframeAuto(index);

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

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

java 复制代码

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 地址

java 复制代码

// 打开弹层
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 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。

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

java 复制代码

// 多弹层模式的层叠顺序置顶
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 : 打开弹层时返回的唯一索引

java 复制代码

// 打开弹窗
var index = layer.open({
  type: 1, // 页面层
  content: '弹层内容'
});
// 设置弹层最大化
layer.full(index);

设置弹层最小化

layer.min(index);

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

java 复制代码

// 打开弹窗
var index = layer.open({
  type: 1, // 页面层
  content: '弹层内容'
});
// 设置弹层最大化
layer.min(index);

还原弹层

layer.restore(index);

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

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

二：案例演示

html 复制代码

<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="t">上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="r">右</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="b">下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="l">左</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rt">右上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rb">右下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lb">左下</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lt">左上</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="auto">正中</button>
  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="">任意</button>
</div>
<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  // 事件
  util.on('lay-on', {
    'test-offset': function(){
      var othis = $(this);
      var offset = othis.data('offset');
      // 弹出位置
      layer.open({
        type: 1,
        offset: offset || ['200px', '280px'], // 详细可参考 offset 属性
        id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
        content: '<div style="padding: 16px;">'+ othis.text() +'</div>',
        area: '240px',
        btn: '关闭全部',
        btnAlign: 'c', // 按钮居中
        shade: 0, // 不显示遮罩
        yes: function(){
          layer.closeAll();
        }
      });
    }
  });
});
</script>

Layui快速入门之第十一节 弹出层

一：基本用法

API

打开弹层

基础属性

弹出信息框

弹出询问框

弹出提示框

弹出加载层

弹出贴士层

弹出输入框

弹出图片层

弹出标签层

关闭弹层

关闭所有层

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

全局配置默认属性

样式初始化就绪

重新设置弹层样式

设置弹层的标题

获取 iframe 页中的元素

在 iframe 页中获取弹层索引

设置 iframe 层高度自适应

重新设置 iframe 层 URL

置顶弹层

设置弹层最大化

设置弹层最小化

还原弹层

二：案例演示

Layui快速入门之第十一节弹出层