Layer.js 弹层参数详解
您提供的代码分析
这段代码展示了Layer.js中layer.open()方法的基本用法,用于打开一个iframe弹窗:
$('#btnIframe').click(function(){
layer.open({
type: 2, // 表示iframe弹窗
title: '微信支付', // 弹窗标题
content: 'https://pay.weixin.com', // iframe加载的URL
area: ['800px', '500px'], // 弹窗尺寸
maxmin: true // 显示最大化/最小化按钮
});
});Layer.open() 参数大全
Layer.js的layer.open()方法确实非常强大,支持数十种配置参数,主要分为以下几类:
基础参数
type - 弹层类型:
0:信息框(默认)
1:页面层
2:iframe层
3:加载层
4:tips层
title - 标题:
支持字符串或数组,如['文本', 'font-size:18px;']
设为false则不显示标题栏
content - 内容:
可以是文本、html或DOM元素
type为2时是URL地址
area - 宽高:
['800px', '500px'] 或 'auto'
外观参数
skin - 样式类名
btn - 按钮:
数组形式,如['确定', '取消']
btnAlign - 按钮对齐方式
closeBtn - 关闭按钮:
0-不显示,1-显示
shade - 遮罩:
[0.8, '#000'] 透明度+颜色
shadeClose - 点击遮罩关闭
功能参数
maxmin - 最大最小化按钮
fixed - 是否固定
scrollbar - 是否允许滚动
resize - 是否允许拉伸
time - 自动关闭时间(毫秒)
回调函数
yes - 确定按钮回调
cancel - 取消/关闭回调
end - 层销毁后回调
full/min/restore - 最大化/最小化/还原回调
完整参数示例
layer.open({
type: 2,
title: ['自定义标题', 'font-size:18px;'],
content: 'http://domain.com',
area: ['800px', '90%'],
maxmin: true,
shade: [0.5, '#000'],
shadeClose: false,
skin: 'your-class',
btn: ['确定', '取消'],
yes: function(index, layero){
// 确定按钮回调
},
cancel: function(){
// 取消按钮回调
}
});Layer.js的弹层功能确实非常强大,通过合理组合这些参数,可以实现各种复杂的弹层交互效果。