- A+
所属分类：Web前端
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'); 点击确定关闭提示框
