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

目录

一：基本用法

API

打开弹层

基础属性

弹出信息框

弹出询问框

弹出提示框

弹出加载层

弹出贴士层

弹出输入框

弹出图片层

弹出标签层

关闭弹层

关闭所有层

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

全局配置默认属性

样式初始化就绪

重新设置弹层样式

设置弹层的标题

获取 iframe 页中的元素

在 iframe 页中获取弹层索引

设置 iframe 层高度自适应

重新设置 iframe 层 URL

置顶弹层

设置弹层最大化

设置弹层最小化

还原弹层

二：案例演示

---

一：基本用法

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

场景	用前准备	使用方式
作为独立组件使用	你可以去 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 : 基础属性配置项。#详见属性

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

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

基础属性

属性名	描述	类型	默认值
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') // 捕获层 }); 注意： 若采用捕获层，则捕获的元素必须存放在  根节点下，否则可能被父级容器的相对定位所影响。 若 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 属性值为默认的 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 的可选值 // 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
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 类型，则支持设置吸附位置和背景色，如： 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; // 阻止默认关闭行为 } });
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

• 参数 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	-
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);

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

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

// 每一种弹层调用方式，都会返回一个 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);

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

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

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

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

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

全局配置默认属性

layer.config(options);

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

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

二：案例演示

  上
  右
  下
  左
  右上
  右下
  左下
  左上
  正中
  任意