关注前端 | 前端博客
当前位置: JavaScript > 通知弹层方法

通知弹层方法

2019-01-24 分类:JavaScript 作者:管理员 阅读(117)

封装一个顶部通知弹层方法,当然我们如果在Vue项目中是可以挂载实例上,这样全局都可以用。

通知弹层参数:

  1. 1、title:通知的标题
  2. 2、content:通知的内容
  3. 3、img:通知的icon图标,可设置成自己的通知图标,覆盖默认的
通知弹层notice方法代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//创建全局通知方法
function notice(title,content,img){
    if(!img){
        img='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2RjFERDE3RTE1NjgxMUU5QjNDREFBNUI2NUE1NkU1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2RjFERDE3RjE1NjgxMUU5QjNDREFBNUI2NUE1NkU1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZGMUREMTdDMTU2ODExRTlCM0NEQUE1QjY1QTU2RTUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZGMUREMTdEMTU2ODExRTlCM0NEQUE1QjY1QTU2RTUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+K/HqkgAAAjFJREFUeNrkl0soRGEUx2fGTJJnNtMoI/IoFCKPwkIpj1JsLGQjC4WQjZVHsvUYrxVJkY2wsvAqr7Jgw4qU51bCyqPr/+ncOs3MZb7rXrNw6tc93/3ud8+ZM+c757tWRVEswRSbJcgSdAfsSkveb9YXgUlwCNr+OgKNZDgHtIK4v3SgH8x73Qv/5vlo4DbCAQdYBn1+5t411qSDa6LRJwckjMeDLZAi6XQKRcBCUYsA07IREMl2qsO4kDXQxcZTFBWfCERqvKAOzEkaDSFeaTwKPoCHxisgTY1ABrgC9xrIGk8Et+AG1LP742CH9FRQozrQABIoAv6QlSTgAk6w5JV4TUzvUR14Nbi4bYMBNhaJl026iPQG6YWidti+2T56RaE60c3uDXolpRArqDazFwzTLxZSAWJIv2TPJJjdjNbZblObzjmbjzLbAW4sgq6PtCWFhJrtgIvpb6pRVgDfzXagmOlndHVTAgp5MdOBZFDAjF+zIqTKg83E0G9SORYywuaymH5gZ9vDKHFSGbaznTDL5pvpegf2RQRODHbAwYzvgio218Za85K6PxcpKbRabT6olHBA/LJyarkedj+WuqIqQ7wdL/zwUrGwQ8KJTYK3+iOWE4NUDwI+kHSy/05WxGH1gnbFV+KBXj1nwhlQAp4kHQijxLRQvpX95lC6DzLBsZ85q8Ya0XxKQTvI9W7/eurALTWW1QAdELIHJoz+MKkFY+CZDqz3el5i/fdfx58CDAAl8mcfOseqBwAAAABJRU5ErkJggg==';
    }
    var o=document.createElement('div');
    o.className='NOTICE';
    o.innerHTML=
    `<div style="
    padding: 8px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;"
>
        <div style="height: 16px;width: 16px;"><img src="${img}" style="width: 16px;"></div>
            <div style="width: 100%;margin: 0 8px;"><div style="font-weight: bold;margin-bottom: 5px;">${title}</div>
            <div style="line-height: 1.5;letter-spacing: 1px;">${content}</div>
        </div>
    </div>
    <div style="
    position: absolute;
    right: 5px;
    bottom: 0;
    font-size: 24px;
    "
id="NOTICECLOSE">×</div>`;
    document.body.appendChild(o);
    updateCss(0);
    setTimeout(function(){updateCss(1)},1000);
    setTimeout(function(){updateCss(0);setTimeout(function(){document.body.removeChild(o);},1000);},7000);
    document.querySelector('#NOTICECLOSE').onclick=function(){updateCss(0);setTimeout(function(){document.body.removeChild(o);},1000);return false;};
    function updateCss(type){
        var s = `position: fixed;width: 100%;min-height:68px;top: -40px;padding-top: 40px;left: 0;right: 0;z-index: 9999;background-color: rgba(253, 240, 237,.85);color: #fe6733;font-size: 13px;-webkit-transition: .4s;transition: .4s;transform: translate3d(0, -100%, 0)`,a=s.split(';'),o=document.querySelector('.NOTICE');
        if(type==0){
            o.style.cssText=s;
        }else{
            a.splice(a.length-1,1);
            a.push('transform: translate3d(0, 0, 0)');
            o.style.cssText=a.join(';');
        }
    }
}
//调用
notice('温馨提示:','我公司退款、理赔绝不会向您索取任何银行卡、支付宝、微信账户的密码或验证!')

效果图

小结:可以自由扩展,比如方向(左右向下中),动画(淡入深出)。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 通知弹层方法

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线