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');  点击确定关闭提示框

LayUI open和confirm使用

1、layUi.open

2、Layer.confirm

推荐阅读