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

  

原文地址:https://www.cnblogs.com/wyy1234/p/9444011.html