layui(二)——layer组件常见用法总结

layer是layui的代表作，功能十分强大，为方便以后快速配置这里对其常见用法做了简单总结

一、常用调用方式

            //1.普通消息：alert(content,[options],[yesCallBack])
            layer.alert('hello', { icon: 1 }, function (index) {
                console.log('点击确定按钮，执行这里')//点击弹窗的确定按钮，执行回调
            })
            //2.询问：confirm(content,[options],[yesCallBack])
            layer.confirm('are you sure?', { icon: 2, title: '确定吗' }, function (index) {
                console.log('点击确定按钮，执行这里');//点击确定按钮，执行回调
                layer.close(index);
            })
            //3.提示：msg（content,[options],[endCallBack]）
            layer.msg('提示你一下', { icon: 6 }, function (index) {
                console.log('关闭时执行这里')
            })
            //4.精确提示：tips(content,element,options)
            layer.tips('提示的精确点', '#test',{ tips: 2 }) //1,2,3,4-->上右下左

二、基础参数配置

　　所有的创建层都执行open方法，open方法返回一个number

　　layer.open({
  type: 1                   //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
, title: '我是标题'          //标题。①false表示无标题 ②['text','css']带样式的标题
, content: '我是内容'        //内容。①可为$('selector')或者html
, time: 5000                //自动关闭。5s后关闭
, id: '01'                  //设置id后，只能同时弹出一个，默认为''

//***********************按钮
, btn: ['按钮1', '按钮2', '按钮3']
, yes: function (index, layero) { console.log('点了按钮1');layer.close(index) } //默认不关闭
, btn2: function (index, layero) { console.log('点了按钮2'); return false; }    //点击后不关闭
, btn3: function (index, layero) { console.log('点了按钮3'); }                  //点击后关闭
, btnAlign: 'r'     //btn的位置 'l':居左，'c':居中
, closeBtn: 1       //关闭按钮，0表示不显示
, cancel: function (index, layero) {
    　if (confirm('确定关闭吗？')) {
      　　　　　　layer.close(index);
    　　　　　　}
      return false;}
, maxmin: true      //最大最小化

//**********************位置和大小
, area: '500px'           //宽高，宽500。['500px',300px]表示高度为300px
, offset: '300px'         //坐标，top300。['300px','50px']表示top300,left50
, fixed: true             //固定。鼠标滚动时，固定在可视区
, resize: true            //可拉伸。
, zindex: 666             //层级
　　
//***********************动画和样式
, anim: 0                 //0:放大，1：下滑，2:上升，3：左滑，4：右滑，5:渐显，6：抖动
, skin: 'mycss'           //内容样式。mycss是自定义的css样式
})

三、关闭弹窗

　　使用layer.close方法可以进行关闭弹窗，参数是layer.open方法返回的窗体编号（number类型）

　　　　var index = layer.open({ type: 1, title: '提示', content: '你好' });
　　　　layer.close(index);

　　当弹窗为iframe时，我们怎么在iframe中关闭自己呢

       layer.open({
            type: 2,                         //弹窗为iframe,
            content: 'http://www.xxxx.com'   //如果不想让iframe出现滚动条，可以设置content: ['url', 'no']
          }); 

       //假设这是iframe中，执行下边代码在iframe中关闭自己
       var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
       parent.layer.close(index);                           //再执行关闭   

注:这是为了个人查找方便整理的文档，并没有总结完全，查看更多可访问官网http://www.layui.com/doc