您好!欢迎访问家园网-www.jy.wang!

家园网

讲一下下面的代码:<script> $('#btnIframe').click(function(){ layer.open({

网络 作者:本站 点击:

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()方法确实非常强大,支持数十种配置参数,主要分为以下几类:

基础参数

  1. type‌ - 弹层类型:

    • 0:信息框(默认)

    • 1:页面层

    • 2:iframe层

    • 3:加载层

    • 4:tips层

  2. title‌ - 标题:

    • 支持字符串或数组,如['文本', 'font-size:18px;']

    • 设为false则不显示标题栏

  3. content‌ - 内容:

    • 可以是文本、html或DOM元素

    • type为2时是URL地址

  4. area‌ - 宽高:

    • ['800px', '500px'] 或 'auto'

外观参数

  1. skin‌ - 样式类名

  2. btn‌ - 按钮:

    • 数组形式,如['确定', '取消']

  3. btnAlign‌ - 按钮对齐方式

  4. closeBtn‌ - 关闭按钮:

    • 0-不显示,1-显示

  5. shade‌ - 遮罩:

    • [0.8, '#000'] 透明度+颜色

  6. shadeClose‌ - 点击遮罩关闭

功能参数

  1. maxmin‌ - 最大最小化按钮

  2. fixed‌ - 是否固定

  3. scrollbar‌ - 是否允许滚动

  4. resize‌ - 是否允许拉伸

  5. time‌ - 自动关闭时间(毫秒)

回调函数

  1. yes‌ - 确定按钮回调

  2. cancel‌ - 取消/关闭回调

  3. end‌ - 层销毁后回调

  4. 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的弹层功能确实非常强大,通过合理组合这些参数,可以实现各种复杂的弹层交互效果。


标签: