layer的open使用

最近接触到layer弹窗，感觉弹窗功能异常强大，真的很方便，所以记录下来；

1.layer官网：http://layer.layui.com/   在这里下载需要的js

2.语法：layer.open(options)

3.实例：

var index = layer.open({
    content: 'test'
}); //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。

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) ：弹出层直接调用其他地方的页面

	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']
	});