[原创] layer.js 实现自适应置顶消息流

本文链接：https://blog.csdn.net/u012731379/article/details/82117803

使用 layer.js 实现只适应置顶消息流, 官网只提供了 API 可以指定, 但只能显示一个, 第二个会删除前一个消息框.
通过查看源码, 如果类型是 dialog, 会调用 closeAll(“dialog”), 清除之前所有的 [type=dialog] 消息框. 只需要将 type 设置不为 dialog 即可不被清除, 不影响超时淡出.
https://github.com/sentsin/layer/blob/master/src/layer.js

// 280 ~ 290
Class.pt.creat = function(){
switch(config.type){
    case 0:
      config.btn = ('btn' in config) ? config.btn : ready.btn[0];
      layer.closeAll('dialog');
...
}

// 950 ~ 960
layer.closeAll = function(type){
  $.each($('.'+doms[0]), function(){
    var othis = $(this);
    var is = type ? (othis.attr('type') === type) : 1;
    is && layer.close(othis.attr('times'));
    is = null;
  });
};

.layui-layer-dialog .layui-layer-content {
    padding-top: 0px;
    padding-bottom: 0px;
}

.layui-layer-dialog.alert {
    padding: 0px;
}

//<cript src="/static/moudles/layer/layer.js" charset="utf-8"></script>
<script language="javascript">
function showMsg(msgType, content, callback) {
    skin = " alert alert-" + (msgType == 'info' ? 'success' : (msgType == 'warning' ? 'warning' : 'danger')) + "  "
    lastTop = ($(".layui-layer.layui-layer-dialog:last").offset() || {}).top || 0;
    console.info("last top: " + lastTop)
    time = 3000;
    options = {
        "content": content || "message ..",
        "time": time,
        "shade": false,
        "skin": " layui-layer-msg layui-layer-hui",
        "title": false,
        "closeBtn": false,
        "btn": false,
        "resize": false,
        "offset": lastTop + 30,
        "anim": 0,
        "tipsMore": true,
        fixed: false,
        skin: skin
    }
    id = layer.open(options);
    // 把 type 修改为非 dialog, 可以保留消息流
    $("#layui-layer" + id).attr("type", $("#layui-layer" + id).attr("type") + "x");
    window.setTimeout(callback, time);
}
</script>

// demo
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class='btn btn-success' onclick='javascript:demo();'> Recv Msg </button>
<script type="text/javascript">
function demo(){
    showMsg('info', "Hello");
    showMsg('warning', "World");
    showMsg('error', "NO !!");
}
</script>