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

ゝ一纸荒年。 2024-03-03 08:40 96阅读 0赞

**目录**

一：基本用法

API

打开弹层

基础属性

弹出信息框

弹出询问框

弹出提示框

弹出加载层

弹出贴士层

弹出输入框

弹出图片层

弹出标签层

关闭弹层

关闭所有层

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

全局配置默认属性

样式初始化就绪

重新设置弹层样式

设置弹层的标题

获取 iframe 页中的元素

在 iframe 页中获取弹层索引

设置 iframe 层高度自适应

重新设置 iframe 层 URL

置顶弹层

设置弹层最大化

设置弹层最小化

还原弹层

二：案例演示

--------------------

### 一：基本用法 ###

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

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>场景</td> 
   <td>用前准备</td> 
   <td>使用方式</td> 
  </tr> 
  <tr> 
   <td>作为独立组件使用</td> 
   <td>你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js</td> 
   <td>&nbsp;通过script标签引入layer.js后，直接用即可</td> 
  </tr> 
  <tr> 
   <td>模块化使用</td> 
   <td>如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入JQuery和 layer.js，但需要引入layui.css和layui.js</td> 
   <td>通过layui.use(‘layer’, callback)加载模块</td> 
  </tr> 
 </tbody> 
</table>

#### API ####

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

#### 打开弹层 ####

`layer.open(options);`

*  参数 `options` : 基础属性配置项。[\#详见属性][Link 1]

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

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

#### 基础属性 ####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td> <p>弹层类型。 可选值有：</p> 
    <ul> 
     <li><code>0</code>&nbsp;dialog 信息框</li> 
     <li><code>1</code>&nbsp;page 页面层</li> 
     <li><code>2</code>&nbsp;iframe 内联框架层</li> 
     <li><code>3</code>&nbsp;loading 加载层</li> 
     <li><code>4</code>&nbsp;tips 贴士层</li> 
    </ul><p><code>layer</code>&nbsp;弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，<code>layer</code>&nbsp;提供的所有的弹出方式均由此衍生。</p> </td> 
   <td>number</td> 
   <td> <p><code>0</code></p> </td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td> <p>弹层标题。其值支持以下可选类型：</p> 
    <ul> 
     <li>若为&nbsp;<code>string</code>&nbsp;类型 : 则表示为弹层的标题文本，如：</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>title: '标题'</code></li> 
    </ol> 
    <ul> 
     <li>若为&nbsp;<code>array</code>&nbsp;类型 : 则可设置标题文本和标题栏 CSS 样式：</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>title: ['标题', 'font-size: 18px;']</code></li> 
    </ol> 
    <ul> 
     <li>若为&nbsp;<code>boolean</code>&nbsp;类型 : 则可设为&nbsp;<code>false</code>&nbsp;不显示标题栏。</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>title: false // 不显示标题栏</code></li> 
    </ol></td> 
   <td>string<br> array<br> boolean</td> 
   <td> <p><code>信息</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.content" title="content" rel="nofollow">content</a></p> </td> 
   <td colspan="3"> <p>弹层内容。 可传入的值比较灵活，支持以下使用场景：</p> 
    <ul> 
     <li>若&nbsp;<code>type: 1</code>（页面层）: 则&nbsp;<code>content</code>&nbsp;可传入值如下：</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>// 普通字符</code></li> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1, </code></li> 
     <li><code>content: '传入任意文本或 HTML'</code></li> 
     <li><code>});</code></li> 
     <li><code>// 捕获页面已存在的 DOM 元素或 jQuery 对象</code></li> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: $('#id') // 捕获层</code></li> 
     <li><code>});</code></li> 
    </ol><p>注意： 若采用捕获层，则捕获的元素必须存放在&nbsp;<code>&lt;body&gt;</code>&nbsp;根节点下，否则可能被父级容器的相对定位所影响。</p> 
    <ul> 
     <li>若&nbsp;<code>type: 2</code>（iframe 层）: 则&nbsp;<code>content</code>&nbsp;可传入值如下：</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>// iframe URL</code></li> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 2, </code></li> 
     <li><code>content: 'http://cn.bing.com' // URL</code></li> 
     <li><code>}); </code></li> 
     <li><code>// 是否屏蔽 iframe 滚动条</code></li> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 2, </code></li> 
     <li><code>// 数组第二个成员设为 no，即屏蔽 iframe 滚动条</code></li> 
     <li><code>content: ['http://cn.bing.com', 'yes']</code></li> 
     <li><code>});</code></li> 
    </ol> 
    <ul> 
     <li>若为其他弹层类型，传入普通字符即可。</li> 
    </ul><p>相关效果可参考：<a href="https://layui.org.cn/docs/layer/layer.html#demo-page" title="#示例" rel="nofollow">#示例</a></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.area" title="area" rel="nofollow">area</a></p> </td> 
   <td> <p>设置弹层的宽高，其值支持以下可选类型：</p> 
    <ul> 
     <li>若为&nbsp;<code>array</code>&nbsp;类型，则可同时设置宽高 
      <ul> 
       <li><code>area: ['520px', '320px']</code>&nbsp;固定宽度和高度</li> 
       <li><code>area: ['auto', '320px']</code>&nbsp;宽度自动，高度固定</li> 
       <li><code>area: ['520px', 'auto']</code>&nbsp;宽度固定，高度自动</li> 
      </ul></li> 
     <li>若为&nbsp;<code>string</code>&nbsp;类型，则可定义宽度和宽高均自适应： 
      <ul> 
       <li><code>area: '520px'</code>&nbsp;宽度固定，高度自适应</li> 
       <li><code>area: 'auto'</code>&nbsp;宽度和高度均自适应</li> 
      </ul></li> 
    </ul></td> 
   <td>array<br> string</td> 
   <td> <p><code>auto</code></p> </td> 
  </tr> 
  <tr> 
   <td>maxWidth</td> 
   <td> <p>弹层的最大宽度。当&nbsp;<code>area</code>&nbsp;属性值为默认的&nbsp;<code>auto'</code>&nbsp;时有效。</p> </td> 
   <td>number</td> 
   <td> <p><code>360</code></p> </td> 
  </tr> 
  <tr> 
   <td>maxHeight</td> 
   <td> <p>弹层的最大高度。当&nbsp;<code>area</code>&nbsp;属设置高度自适应时有效。</p> </td> 
   <td>number</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.offset" title="offset" rel="nofollow">offset</a></p> </td> 
   <td> <p>弹层的偏移坐标。 支持以下可选值：</p> 
    <ul> 
     <li><code>offset: 'auto'</code>&nbsp;坐标始终垂直水平居中</li> 
     <li><code>offset: '16px'</code>&nbsp;只设置垂直坐标，水平保持居中</li> 
     <li><code>offset: ['16px', '16px']</code>&nbsp;设置垂直和水平坐标</li> 
     <li><code>offset: 't'</code>&nbsp;上边缘</li> 
     <li><code>offset: 'r'</code>&nbsp;右边缘</li> 
     <li><code>offset: 'b'</code>&nbsp;下边缘</li> 
     <li><code>offset: 'l'</code>&nbsp;左边缘</li> 
     <li><code>offset: 'rt'</code>&nbsp;右上角</li> 
     <li><code>offset: 'rb'</code>&nbsp;右下角</li> 
     <li><code>offset: 'lt'</code>&nbsp;左上角</li> 
     <li><code>offset: 'lb'</code>&nbsp;左下角</li> 
    </ul><p>当设置边缘坐标时，可配合&nbsp;<code>anim</code>&nbsp;属性实现抽屉弹出效果。</p> </td> 
   <td>string<br> array</td> 
   <td> <p><code>auto</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.anim" title="anim" rel="nofollow">anim</a></p> </td> 
   <td> <p>弹层的出场动画。支持以下可选值：</p> 
    <ul> 
     <li><code>anim: 0</code>&nbsp;平滑放大。默认</li> 
     <li><code>anim: 1</code>&nbsp;从上掉落</li> 
     <li><code>anim: 2</code>&nbsp;从最底部往上滑入</li> 
     <li><code>anim: 3</code>&nbsp;从左滑入</li> 
     <li><code>anim: 4</code>&nbsp;从左翻滚</li> 
     <li><code>anim: 5</code>&nbsp;渐显</li> 
     <li><code>anim: 6</code>&nbsp;抖动</li> 
    </ul><p>边缘抽屉动画&nbsp;2.8+：</p> 
    <ul> 
     <li><code>anim: 'slideDown'</code>&nbsp;从上边缘往下</li> 
     <li><code>anim: 'slideLeft'</code>&nbsp;从右边缘往左</li> 
     <li><code>anim: 'slideUp'</code>&nbsp;从下边缘往上</li> 
     <li><code>anim: 'slideRight'</code>&nbsp;从左边缘往右</li> 
    </ul><p>抽屉动画一般配合&nbsp;<code>offset</code>&nbsp;属性实现边缘弹出。<a href="https://layui.org.cn/docs/layer/layer.html#demo-more" title="#详见示例" rel="nofollow">#详见示例</a></p> </td> 
   <td>number<br> string</td> 
   <td> <p><code>0</code></p> </td> 
  </tr> 
  <tr> 
   <td>isOutAnim</td> 
   <td> <p>是否开启弹层关闭时的动画。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>maxmin</td> 
   <td> <p>是否开启标题栏的最大化和最小化图标。</p> </td> 
   <td>array</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.closeBtn" title="closeBtn" rel="nofollow">closeBtn</a></p> </td> 
   <td> <p>是否开启标题栏的关闭图标，或设置关闭图标风格。</p> 
    <ul> 
     <li><code>closeBtn: 0</code>&nbsp;不显示关闭图标</li> 
     <li><code>closeBtn: 1</code>&nbsp;关闭图标默认风格</li> 
     <li><code>closeBtn: 2</code>&nbsp;关闭图标风格二</li> 
    </ul></td> 
   <td>number</td> 
   <td> <p><code>1</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.icon" title="icon" rel="nofollow">icon</a></p> </td> 
   <td> <p>提示图标。 信息框和加载层的私有参数。</p> 
    <ul> 
     <li>若为信息框，支持传入&nbsp;<code>0-6</code>&nbsp;的可选值。<br> 默认为&nbsp;<code>-1</code>，即不显示图标。</li> 
     <li>若为加载层，支持传入&nbsp;<code>0-2</code>&nbsp;的可选值</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>// eg1</code></li> 
     <li><code>layer.alert('成功提示', {icon: 1});</code></li> 
     <li><code>// eg2</code></li> 
     <li><code>layer.msg('开心表情', {icon: 6});</code></li> 
     <li><code>// eg3</code></li> 
     <li><code>layer.load(1); // 加载层风格一</code></li> 
    </ol></td> 
   <td>number</td> 
   <td> <p><code>-1</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.btn" title="btn" rel="nofollow">btn</a></p> </td> 
   <td> <p>自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：</p> <pre></pre> 
    <ol> 
     <li><code>// eg1 </code></li> 
     <li><code>layer.confirm('询问框？', { </code></li> 
     <li><code>btn: ['按钮1', '按钮2', '按钮3']</code></li> 
     <li><code>});</code></li> 
     <li><code>// eg2</code></li> 
     <li><code>layer.open({ </code></li> 
     <li><code>content: 'test',</code></li> 
     <li><code>btn: ['按钮1', '按钮2', '按钮3'],</code></li> 
     <li><code>// 按钮1 的回调</code></li> 
     <li><code>btn1: function(index, layero, that){},</code></li> 
     <li><code>btn2: function(index, layero, that){ </code></li> 
     <li><code>// 按钮2 的回调</code></li> 
     <li><code>// return false // 点击该按钮后不关闭弹层</code></li> 
     <li><code>},</code></li> 
     <li><code>btn3: function(index, layero, that){ </code></li> 
     <li><code>// 按钮3 的回调</code></li> 
     <li><code>// return false // 点击该按钮后不关闭弹层</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.btnAlign" title="btnAlign" rel="nofollow">btnAlign</a></p> </td> 
   <td> <p>按钮水平对其方式。支持以下可选值：</p> 
    <ul> 
     <li><code>btnAlign: 'l'</code>&nbsp;按钮左对齐</li> 
     <li><code>btnAlign: 'c'</code>&nbsp;按钮水平居中对齐</li> 
     <li><code>btnAlign: 'r'</code>&nbsp;按钮右对齐。默认值，不用设置</li> 
    </ul></td> 
   <td>string</td> 
   <td> <p><code>r</code></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.skin" title="skin" rel="nofollow">skin</a></p> </td> 
   <td> <p>弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：</p> 
    <ul> 
     <li><code>layui-layer-molv</code>&nbsp;墨绿主题</li> 
     <li><code>layui-layer-lan</code>&nbsp;深蓝主题</li> 
     <li><code>layui-layer-win10</code>&nbsp;Windows 10 主题&nbsp;2.8+</li> 
    </ul><p>还可传入其他任意 className 来自定义主题。 参考：<a href="https://layui.org.cn/docs/layer/layer.html#demo-skin" title="#示例" rel="nofollow">#示例</a></p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.shade" title="shade" rel="nofollow">shade</a></p> </td> 
   <td> <p>弹层的遮罩。 支持以下写法：</p> 
    <ul> 
     <li><code>shade: 0.3</code>&nbsp;设置遮罩深色背景的透明度</li> 
     <li><code>shade: [0.3, '#FFF']</code>&nbsp;设置遮罩透明度和颜色值</li> 
     <li><code>shade: 0</code>&nbsp;不显示遮罩</li> 
    </ul></td> 
   <td>number<br> array</td> 
   <td> <p><code>0.3</code></p> </td> 
  </tr> 
  <tr> 
   <td>shadeClose</td> 
   <td> <p>是否点击遮罩时关闭弹层。当遮罩存在时有效。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>time</td> 
   <td> <p>弹层自动关闭所需的毫秒数。 如&nbsp;<code>time: 3000</code>&nbsp;，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。</p> </td> 
   <td>number</td> 
   <td> <p><code>0</code></p> </td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td> <p>弹层的 ID 值。一般用于防止页面层或 iframe 层的重复弹出。</p> </td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td> <p>弹层是否固定定位，即始终显示在页面可视区域。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>zIndex</td> 
   <td> <p>弹层的初始层叠顺序值。</p> </td> 
   <td>number</td> 
   <td> <p><code>19891014</code></p> </td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td> <p>是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>scrollbar</td> 
   <td> <p>打开弹层时，是否允许浏览器出现滚动条。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>minStack&nbsp;2.6+</td> 
   <td> <p>点击标题栏的最小化时，是否从页面左下角堆叠排列。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>removeFocus&nbsp;2.8+</td> 
   <td> <p>是否移除弹层触发元素的焦点，避免按回车键时重复弹出。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>true</code></p> </td> 
  </tr> 
  <tr> 
   <td>move</td> 
   <td> <p>绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置&nbsp;<code>move: false</code>&nbsp;禁止拖拽。 用法参考：<a href="https://layui.org.cn/docs/layer/layer.html#demo-page" title="#示例" rel="nofollow">#示例</a></p> </td> 
   <td>string<br> DOM<br> boolean</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>moveOut</td> 
   <td> <p>否允许拖拽到窗口外</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td>tips</td> 
   <td> <p>设置 tips 层的吸附位置和背景色，tips 层的私有属性。</p> 
    <ul> 
     <li>若为&nbsp;<code>number</code>&nbsp;类型，则支持&nbsp;<code>1-4</code>&nbsp;的可选值，分别代表<em>上右下左</em>的吸附位置。如：&nbsp;<code>tips: 1</code></li> 
     <li>若为&nbsp;<code>array</code>&nbsp;类型，则支持设置吸附位置和背景色，如：</li> 
    </ul><pre></pre> 
    <ol> 
     <li><code>tips: [1, '#000'] // 吸附在上的深色贴士层</code></li> 
    </ol></td> 
   <td>number<br> array</td> 
   <td> <p><code>2</code></p> </td> 
  </tr> 
  <tr> 
   <td>tipsMore</td> 
   <td> <p>是否允许同时存在多个 tips 层，即不销毁上一个 tips。</p> </td> 
   <td>boolean</td> 
   <td> <p><code>false</code></p> </td> 
  </tr> 
  <tr> 
   <td colspan="4"> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.callback" title="回调函数" rel="nofollow">回调函数</a></p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.success" title="success" rel="nofollow">success</a></p> </td> 
   <td colspan="3"> <p>打开弹层成功后的回调函数。返回的参数如下：</p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>success: function(layero, index, that){ </code></li> 
     <li><code>// 弹层的最外层元素的 jQuery 对象</code></li> 
     <li><code>console.log(layero);</code></li> 
     <li><code>// 弹层的索引值</code></li> 
     <li><code>console.log(index);</code></li> 
     <li><code>// 弹层内部原型链中的 this --- 2.8+</code></li> 
     <li><code>console.log(that);</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.yes" title="yes" rel="nofollow">yes</a></p> </td> 
   <td colspan="3"> <p>点击「确定」按钮的回调函数。返回的参数同&nbsp;<code>success</code></p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>yes: function(index, layero, that){ </code></li> 
     <li><code>// do something</code></li> 
     <li><code>layer.close(index); // 关闭弹层</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.cancel" title="cancel" rel="nofollow">cancel</a></p> </td> 
   <td colspan="3"> <p>点击标题栏关闭按钮的回调函数。返回的参数同 `success`</p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>cancel: function(index, layero, that){ </code></li> 
     <li><code>if(confirm('确定要关闭么')){ </code></li> 
     <li><code>layer.close(index);</code></li> 
     <li><code>}</code></li> 
     <li><code>return false; // 阻止默认关闭行为</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.end" title="end" rel="nofollow">end</a></p> </td> 
   <td colspan="3"> <p>弹层被关闭且销毁后的回调函数。</p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>end: function(){ </code></li> 
     <li><code>console.log('弹层已被移除');</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.moveEnd" title="moveEnd" rel="nofollow">moveEnd</a></p> </td> 
   <td colspan="3"> <p>弹层拖拽完毕后的回调函数。</p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>moveEnd: function(layero){ </code></li> 
     <li><code>console.log('拖拽完毕');</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.resizing" title="resizing" rel="nofollow">resizing</a></p> </td> 
   <td colspan="3"> <p>弹层拉伸过程中的回调函数</p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>resizing: function(layero){ </code></li> 
     <li><code>console.log('拉伸中');</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.full" title="full" rel="nofollow">full</a></p> </td> 
   <td colspan="3"> <p>弹层最大化后的回调函数。返回的参数同&nbsp;<code>success</code></p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>full: function(layero, index, that){ </code></li> 
     <li><code>console.log('弹层已最大化');</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.min" title="min" rel="nofollow">min</a></p> </td> 
   <td colspan="3"> <p>弹层最小化后的回调函数。返回的参数同&nbsp;<code>success</code></p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>min: function(layero, index, that){ </code></li> 
     <li><code>// do something</code></li> 
     <li><code>// return false; // 阻止默认最小化</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layui.org.cn/docs/layer/layer.html#options.restore" title="restore" rel="nofollow">restore</a></p> </td> 
   <td colspan="3"> <p>弹层被还原后的回调函数。返回的参数同 `success`</p> <pre></pre> 
    <ol> 
     <li><code>layer.open({ </code></li> 
     <li><code>type: 1,</code></li> 
     <li><code>content: '内容',</code></li> 
     <li><code>restore: function(layero, index, that){ </code></li> 
     <li><code>console.log('弹层已还原');</code></li> 
     <li><code>}</code></li> 
     <li><code>});</code></li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

#### 弹出信息框 ####

`layer.alert(content, options, yes);`

*  参数 `content` : 弹出内容
 *  参数 `options` : 基础属性配置项。[\#详见属性][Link 1]
 *  参数 `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` : 基础属性配置项。[\#详见属性][Link 1]
 *  参数 `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` : 基础属性配置项。[\#详见属性][Link 1]
 *  参数 `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` : 基础属性配置项。[\#详见属性][Link 1]

该方法用于弹出 `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` : 基础属性配置项。[\#详见属性][Link 1]

该方法用于弹出 `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` : 基础属性配置项。除了支持 [基础属性][Link 1] 之外，还支持下表私有属性：

<table> 
 <thead> 
  <tr> 
   <th>私有属性</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>formType</td> 
   <td>输入框类型。支持以下可选值： 
    <ul> 
     <li><code>0</code>&nbsp;文本输入框</li> 
     <li><code>1</code>&nbsp;密令输入框</li> 
     <li><code>2</code>&nbsp;多行文本输入框</li> 
    </ul></td> 
   <td>number</td> 
   <td><code>0</code></td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>输入框初始值</td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>可输入的最大字符长度</td> 
   <td>number</td> 
   <td><code>500</code></td> 
  </tr> 
 </tbody> 
</table>

*  参数 `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` : 基础属性配置项。除了支持 [基础属性][Link 1] 之外，还支持下表私有属性：

<table> 
 <thead> 
  <tr> 
   <th>私有属性</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>photos</td> 
   <td>图片层的数据源，格式详见下述示例。</td> 
   <td>object</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>tab</td> 
   <td>图片层切换后的回调函数，返回的参数见下述示例</td> 
   <td>function</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

该方法用于弹出图片层，基于 `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` : 基础属性配置项。除了支持 [基础属性][Link 1] 之外，还支持下表私有属性：

<table> 
 <thead> 
  <tr> 
   <th>私有属性</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tab</td> 
   <td>标签层的数据源，格式详见下述示例。</td> 
   <td>array</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

该方法用于弹出标签层，基于 `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: '<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` : 打开弹层时返回的唯一索引

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

### 二：案例演示 ###

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

[Link 1]: https://layui.org.cn/docs/layer/layer.html#options