13.弹出层.下

学习要点：

1. 基础参数

本节课我们来开始了解 Layui 的内置模块：弹出层的方法演示。

一．基础参数

1. 参数，我们主要通过 open 方法来演示，其它方法类似；

layer . open ({

// 标题

title : ' 标题 ' ,

// 内容

content : ' 这是内容 ~' ,

//icon 图标，默认信息框 -1 ，其余 0-6

icon : 6 ,

//3 秒后自动关闭

time : 5000 ,

// 动画效果 0-6

anim : 0 ,

// 设置宽高

area : [ '400px' , '250px' ],

// 坐标，默认居中，值较多，看手册

offset : 'auto' ,

})

PS ：这里还有一些其它效果：滚动、拉伸、固定、拖拽、动画、遮罩、最大最小等；

2. 除了 open 方法，其它方法都有各种按钮和固定回调， open 都可以实现；

layer . open ({

// 标题

title : ' 标题 ' ,

// 内容

content : ' 这是内容 ~' ,

// 按钮

btn : [ ' 确定 ' , ' 取消 ' ],

// 回调设置： btn1 表示第一个按钮，以此类推

// 当然， btn1 也可以改为 yes ，表示第一个 btn

// 参数 index 表示当前弹窗的下标，也就是第几个

// 参数 layero 表示当前的弹窗对象

btn1 ( index , layero ) {

alert ( layero )

},

// 右上角关闭按钮的回调

cancel ( index , layero ) {

alert ( index )

},

// 弹窗创建完毕时执行这个回调

success ( layero , index ) {

alert ( index )

},

// 按钮的排列， l,c,r

btnAlign : 'l' ,

// 关闭按钮的样式 :0-2 ， 0 表示不显示

closeBtn : 1 ,

})

3. 还有其余的比较实用的弹窗，比如 tips 吸附、 iframe 框架；

layer . tips ( ' 吸附 ' , '#btn-tips' )

layer . open ({

// 必须设置类型 2 为 iframe

type : 2 ,

content : [ 'http://www.baidu.com' , 'no' ]

})

PS ：剩下还有一些方法和参数，都比较重复，可以查阅学习；

PS ：由于手册没有案例，本身它还提供了一个案例页面，如下：