LayUI open和confirm使用

1、layUi.open

• 功能描述

  layer.open 根据type不同，类型也就不一样,有五种类型：
   0（信息框，默认）
   1（页面层）
   2（iframe层）
   3（加载层）
   4（tips层）
  其实工作开发中用的最多的就是1、2这两种类型了，这里就只介绍这两种，其他的可以参考官网例子

• 页面层（type：1）：弹出层展示的是某个定义好的页面元素

  layer.open({
      type: 1 //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
      title: 'title here',   //标题
      area: ['390px', '330px'],   //宽高
      shade: 0.4,   //遮罩透明度
      content: $("#test"),//支持获取DOM元素
      btn: ['确定', '取消'], //按钮组
      scrollbar: false ,//屏蔽浏览器滚动条
      yes: function(index){//layer.msg('yes');    //点击确定回调
          layer.close(index);
          showToast();
      },
      btn2: function(){//layer.alert('aaa',{title:'msg title'});  ////点击取消回调
          layer.msg('bbb');//layer.closeAll();
      }

• iframe层(type:2)：弹出层直接调用其他地方的页面

  实例1：
  layer.open({
        type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        shade:0.1, //遮罩层透明度
        area:['850px','500px'], //弹出层宽高
        title:'材料库',//弹出层标题
        content: 'xx/xx.jsp' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
      });
  实例2：
   layer.open({
                    type: 2, //类型，解析url
                    closeBtn: 1, //关闭按钮是否显示 1显示0不显示
                    title: title, //页面标题
                    shadeClose: true, //点击遮罩区域是否关闭页面
                    shade: 0.8,  //遮罩透明度
                    area: ['900px', '500px'],  //弹出层页面比例
                    content: '${ctx}/manage/classPlan/courseList?isOnline='+type  //弹出层的url
              }); 
  实例3：
      layer.open({
          type : 2,
          title : '增加',
          maxmin : true,
          shadeClose : false, // 点击遮罩关闭层
          area : [ '800px', '520px' ],
          content : prefix + '/add' // iframe的url
      });

2、Layer.confirm

• 功能描述：点击【确定】按钮，默认执行下面function()中的方法，点击【取消】按钮，则直接关闭确认框，具体示例如下：

  实例1：
  function remove(id) {
      layer.confirm('确定要删除选中的记录？', {
          btn : [ '确定', '取消' ]
      }, function() {
          $.ajax({
              url : prefix + "/remove",
              type : "post",
              data : {
                  'id' : id //传入参数
              },
              success : function(r) {
                  if (r.code == 0) {
                      layer.msg(r.msg);
                      reLoad();
                  } else {
                      layer.msg(r.msg);
                  }
              }
          });
      })
  }
  实例2
  layer.confirm('您确定要删除这条数据吗？', {
  btn: ['确定','取消'] //按钮
  }, function()
  {
  layer.closeAll('dialog');
  $.ajax({
  type: "post",
  url: "${pageContext.request.contextPath}/cuishou/delete",
  data: {
  "id": id
  },
  success : function(data){
   
  }
  });
  });
  
  layer.closeAll('dialog');  点击确定关闭提示框