插件layui弹出层的使用笔记

layui的弹出层基本格式:

layer.open({
    //类型:layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
                type: 1,
    //标题:title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
        title :'添加用户',
    //宽高:在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']
        area: ['600px', '450px'],
    //内容:content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
        content: `text/$('#id')/`,
    //按钮:信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推
                btn: ['按钮一', '按钮二', '按钮三'],
        yes: function(index, layero){
        //按钮【按钮一】的回调
          },
        btn2: function(index, layero){
        //按钮【按钮二】的回调
     //return false 开启该代码可禁止点击该按钮关闭
          },
        btn3: function(index, layero){
        //按钮【按钮三】的回调
         //return false 开启该代码可禁止点击该按钮关闭
          }
    });

猜你喜欢

转载自www.cnblogs.com/xwenbin/p/10365507.html
今日推荐