layui彈窗組件layer之layer.msg提示框學習

layui.layer   彈層之美

layer 至今仍作為 layui 的代表作，她的受眾廣泛並非偶然，而是這數年來的堅持、不棄的執念，將那些不屑的眼光轉化為應得的尊重，不斷完善和維護、不斷建設和提升社區服務，在 Web 開發者的圈子里口口相傳，乃至於成為今天的 layui 最強勁的源動力。目前，layer已成為國內最多人使用的 Web 彈層組件，GitHub 自然Stars5000+，官網累計下載量達50w+，大概有30萬不同規模的 Web 平台使用過 layer。

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

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

 

第一個參數：提示

第二個參數：自動關閉時間

第三個參數：圖標類型

第四個參數：msg關閉后執行的回調

 

//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6}); 
//eg3
layer.msg('關閉后想做些什么', function(){
  //do something
}); 
//eg
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒關閉（如果不配置，默認是3秒）
}, function(){
  //do something
});   

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

參考文檔：layui.layer官方手冊

 

 

日期：2021.3.13