layer - 简单好用的Web弹出层组件使用详解4（弹出自定义内容、iframe）

2018-05-29 发布：hangge 阅读：2577

九、自定义弹出框内容

1，显示指定的 html 内容

（1）下面是最简单的用法，弹出框会根据内容自适应大小。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

（2）也可以指定弹出框大小。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  area: ['500px', '200px'],
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

2，显示 DOM 对象

content 也可以直接配置成页面上的 DOM 元素，并将其显示。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  area: '516px',
  content: $("#message")  //显示id为message的元素
});

3，显示外部的 html 页面

（1）将 type 设置为 2 表示将一个 html 页面以 iframe 加载的形式弹出。

layer.open({
  type: 2,
  area: ['600px', '250px'],
  content: 'detail.html'
});

（2）可以禁用嵌入页中的滚动条。

layer.open({
  type: 2,
  area: ['600px', '250px'],
  content: ['detail.html', 'no']
});

4，添加按钮

弹出框支持添加无限个按钮，特别注意以下两点：

按钮 1 的回调是 yes，而从按钮 2 开始，则回调为 btn2、btn3...以此类推
按钮 1 点击后不会自动关闭提示框（之后的都会），如需关闭，需要调用 close 方法。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  area: ['500px', '170px'],
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>',
  btn: ['按钮1', '按钮2', '按钮3'],
  yes: function(){
    alert("按钮1点击");
    layer.closeAll(); //关闭所有弹出框
  },
  btn2: function(){
    alert("按钮2点击");
  },
  btn3: function(){
    alert("按钮3点击");
  },
  cancel: function(){
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

5，最大化、最小化功能

将 maxmin 属性设置为 true 时，标题栏右侧会出现最大化、最小化按钮，点击后即可放大或缩小整个提示框。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  area: ['500px', '200px'],
  maxmin: true, //支持放大缩小
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

6，多窗口模式

我们可以像 Windows 窗口那样，弹出多个提示框同时使用，要注意以下两点：

将背景遮罩隐藏，否则每次只能看到一个提示框。
点击某个提示框时要将其置顶，防止被其他提示框遮挡。

//循环弹出3个窗口
for(var i=0 ; i<3; i++){
  layer.open({
    type: 1, //1:自定义内容 2:iframe
    area: ['300px', '150px'],
    maxmin: true, //支持放大缩小
    shade: 0, //不显示背景遮罩
    offset: [ //为了演示，随机坐标
      Math.random()*($(window).height()-300),
      Math.random()*($(window).width()-390)
    ],
    zIndex: layer.zIndex,  //层叠顺序
    success: function(layero){ //点击摸个弹出框时会调用
      layer.setTop(layero); //置顶当前窗口
    },
    skin: "layui-layer-border",
    content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
  });
}

7，隐藏标题栏

我们还可以将提示框的标题、关闭按钮全部隐藏，只显示内容。要注意的是，由于没有关闭按钮，所以需要设置点击遮罩关闭提示框的功能。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  title: false, //不显示标题
  closeBtn: 0, //不显示关闭按钮
  shadeClose: true,  //点击外部遮罩自动关闭提示框
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

8，修改样式

（1）通过 skin 配置属性我们可以设置提示框的样式。比如下面将提示框背景改成蓝色。

<style>
  .yourclass {
    background-color: #C1ECFF;  /* 浅蓝色背景 */
  }
</style>

<script>
  window.onload = function() {

    //显示自定义的提示框
    layer.open({
      type: 1, //1:自定义内容 2:iframe
      title: false, //不显示标题
      closeBtn: 0, //不显示关闭按钮
      shadeClose: true,  //点击外部遮罩自动关闭提示框
      skin: 'yourclass', //弹出框样式
      content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
    });

  }
</script>

（2）layer 也自带了一些样式供我们直接使用。比如下面给提示框外部加上边框。

//显示自定义的提示框
layer.open({
  type: 1, //1:自定义内容 2:iframe
  title: false, //不显示标题
  closeBtn: 0, //不显示关闭按钮
  shadeClose: true,  //点击外部遮罩自动关闭提示框
  skin: 'layui-layer-rim', //加上边框
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

（3）下面是灰色样式皮肤。

layer.open({
  type: 1, //1:自定义内容 2:iframe
  skin: 'layui-layer-hui', //灰色皮肤
  content: '<div style="margin:20px;">自定义 <b>HTML</b> 内容</div>'
});

附：一个弹出公告层样例

layer.open({
  type: 1
  ,title: false //不显示标题栏
  ,closeBtn: false
  ,area: '300px;'
  ,shade: 0.8
  ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
  ,resize: false
  ,btn: ['火速围观', '残忍拒绝']
  ,btnAlign: 'c'
  ,moveType: 1 //拖拽模式，0或者1
  ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; '
   + 'color: #fff; font-weight: 300;">欢迎访问hangge.com<br><br>喜欢就点个赞吧!</div>'
  ,success: function(layero){
    var btn = layero.find('.layui-layer-btn');
    btn.find('.layui-layer-btn0').attr({
      href: 'http://www.hangge.com/'
      ,target: '_blank'
    });
  }
});