layui弹窗组件layer之layer.msg提示框学习

layui.layer   弹层之美

至今layer仍被视为layui的代表作。他的受众广不是偶然，而是他这几年的坚持和执着。他把那些不屑的目光变成了应得的尊重，不断的完善和维护，不断的建设和推广社区服务，在Web开发者的圈子里口口相传，甚至成为了今天的ui最强的来源。 目前layer已经成为国内使用最广泛的Web层组件，GitHub natural Stars5000+，在官网累计下载量达到50w+。大约有30万个不同规模的web平台使用了layer。

layer.msg(content, options, end) - 提示框

layer.msg(‘提示‘, 2, 1, function(){})

第四个参数：msg关闭后执行的回调

//eg1layer.msg('只想弱弱提示');//eg2layer.msg('有表情地提示', {icon: 6}); 
//eg3layer.msg('关闭后想做些什么', function(){  //do something}); 
//eglayer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭（如果不配置，默认是3秒）}, function(){  //do something});

 在贴出代码

 1 layer.alert('见到你真的很高兴', {icon: 6}); 

这是一个最简单的弹出层,可根据icon配置左边的图标

通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 

如图:

 layer.alert('墨绿风格，点击确认看深蓝', {
     skin: 'layui-layer-molv' //样式类名  自定义样式
     ,closeBtn: 1    // 是否显示关闭按钮
     ,anim: 1 //动画类型
     ,btn: ['重要','奇葩'] //按钮
    ,icon: 6    // icon
    ,yes:function(){
       layer.msg('按钮1')
   }
   ,btn2:function(){
       layer.msg('按钮2')
     }});

layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
     time: 2000, //2s后自动关闭
     btn: ['明白了', '知道了', '哦']
      });

回调的例子:

 代码:

  layer.msg('也可以这样', {
       btn: ['明白了', '知道了']
       ,yes: function(index, layero){
            layer.msg("按钮1回调,参数是:"+index)
       }
      ,btn2: function(index, layero){
           //按钮【按钮二】的回调
           layer.msg("按钮2回调,参数是:"+index)
           return false //开启该代码可禁止点击该按钮关闭
     }
 });

layer.open({
    type: 1
    ,title: "open方式弹出层" //不显示标题栏   title : false/标题
    ,closeBtn: true
    ,area: '300px;'
    ,shade: 0.8
    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
    ,resize: false
    ,btn: ['火速围观', '残忍拒绝']
    ,btnAlign: 'c'
    ,moveType: 1 //拖拽模式，0或者1
    ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
    ,success: function(layero){         var btn = layero.find('.layui-layer-btn');
            btn.find('.layui-layer-btn0').attr({
                 href: 'http://www.layui.com/'
            ,target: '_blank'
        });
    }
});

 layer.msg 使用案例一

    function setStatus(id){
        layer.msg('确认要变更状态吗？',{
            time:5000,
            shade:0.3,
            btn:['确认','取消'],
            yes:function() {                //执行变更
                $.post("{:url('member/setStatus')}",{id:id},function(data){                    if(data.code === 1){
                        layer.msg(data.msg,{time:2000},function(){                            if(data.url) location.href = data.url;
                        });
                    }else{
                        layer.msg(data.msg,{time:2000});
                    }
                })
            }
        });
    }