layer.open 按钮的点击事件关闭方法

layer.open 是 layui 模块中的一个弹出层组件，当我们需要弹出窗口来展示内容时，常常需要使用到 layer.open。当我们在弹出层中添加按钮，并且想要通过点击按钮来关闭弹出层时，需要使用到 layer.close 方法。

layer.open 的使用方法

代码示例：

layer.open({
  type: 1,
  title: '弹出层示例',
  content: '这是一段弹出层内容',
  btn: ['确定', '取消'],
  yes: function(index, layero){
    //按钮【确定】的回调
  },
  cancel: function(){
    //右上角关闭按钮的回调
  }
});

上面代码中，我们通过 layer.open 方法弹出了一个弹出层，其中：

- type: 1 表示弹出层类型，这里是普通的居中弹出层；

- title: '弹出层示例' 表示弹出层的标题；

- content: '这是一段弹出层内容' 表示弹出层中显示的内容；

- btn: ['确定', '取消'] 表示弹出层中需要添加的按钮，可以传入一个数组，数组中的每个元素都将被渲染为一个按钮；

- yes: function(index, layero){} 表示按钮【确定】的回调函数，点击该按钮时会触发该回调函数；

- cancel: function(){} 表示右上角关闭按钮的回调函数，点击该按钮时会触发该回调函数。

layer.close 的使用方法

通过上面的代码，我们已经成功弹出了一个层，同时添加了两个按钮。当我们需要通过点击按钮来关闭弹出层时，需要在按钮的回调函数中调用 layer.close 方法。layer.close 方法可以接收一个参数，即弹出层的索引值。

代码示例：

layer.open({
  type: 1,
  title: '弹出层示例',
  content: '这是一段弹出层内容',
  btn: ['确定', '取消'],
  yes: function(index, layero){
    //按钮【确定】的回调
    layer.close(index); //关闭当前层
  },
  cancel: function(){
    //右上角关闭按钮的回调
  }
});

在上面的代码中，我们在按钮【确定】的回调函数中调用了 layer.close 方法，并传入了 index 参数。这样就可以通过点击按钮【确定】来关闭弹出层了。

当然，我们也可以在其他地方调用 layer.close 方法来关闭弹出层，只需要传入正确的索引值即可。

总结

通过 layer.open 方法和 layer.close 方法的配合使用，我们可以轻松地实现弹出层功能，并且可以设置弹出层中的按钮进行交互，同时也可以通过按钮的回调函数来关闭弹出层。