右下角 弹出通知

Posted 2020-12-04 potatog

(function(){

    window.pMsg = function(content,title,time)
    {
        return new PotatogMsg(content,title,time);
    }

    function PotatogMsg(content,title,time)
    {
        if(typeof title == "undefined")title = "通知";
        if(typeof time == "undefined")time = 0;
        this.time = time;
        this.content = content;
        this.title = title;
        this.initDom();
        this.bindEvent();
        this.autoClose();
    }

    PotatogMsg.prototype.initDom = function()
    {
        var PmsgBox = document.getElementById("dvPmsgContent");
        if(PmsgBox == null)
        {
            PmsgBox = document.createElement("div");
            PmsgBox.setAttribute("id","dvPmsgContent");
            PmsgBox.style.position = "absolute";
            PmsgBox.style.right = "15px";
            PmsgBox.style.bottom = "15px";
            document.body.appendChild(PmsgBox);
           
        }
        window.PmsgBox = PmsgBox;

        this.boxDom = document.createElement("div");

        this.boxDom.style.position = "relative";
        this.boxDom.style.right = "0px";
        this.boxDom.style.bottom = "0px";
        this.boxDom.style.minWidth = "200px";
        this.boxDom.style.maxWidth = "300px";
        this.boxDom.style.border = "1px solid #eee";
        this.boxDom.style.borderRadius = "8px";
        this.boxDom.style.boxShadow = "0px 0px 15px #aaa";
        this.boxDom.style.display = "flex";
        this.boxDom.style.flexDirection = "column";
        this.boxDom.style.marginBottom = "3px";
        this.boxDom.style.transition = "1s";

        this.boxDom.style.opacity = "0";
        this.boxDom.style.height = "0px";
        this.boxDom.style.overflow = "scroll";
        this.boxDom.style.overflowX = "none";
        this.boxDom.style.overflowY = "auto";

        this.titleDom = document.createElement("div");
        this.titleDom.style.height = "30px";
        this.titleDom.style.borderBottom = "1px dashed #aaa";
        this.titleDom.style.margin = "0px 15px";
        this.titleDom.style.lineHeight = "30px";
        this.titleDom.style.color = "#888";
        this.titleDom.style.fontWeight = "bold";
        this.titleDom.style.letterSpacing = "3px";
        this.titleDom.style.paddingLeft = "5px";
        this.titleDom.innerhtml = this.title;

        this.contentDom = document.createElement("div");
       
        this.contentDom.style.flex = "1";
        this.contentDom.style.padding = "15px";
        this.contentDom.style.color = "#555";
        this.contentDom.innerHTML = this.content;

        this.boxCloseDom = document.createElement("div");
        this.boxCloseDom.style.position = "absolute";
        this.boxCloseDom.style.right = "8px";
        this.boxCloseDom.style.top = "0px";
        this.boxCloseDom.innerHTML = "×";
        this.boxCloseDom.style.fontSize = "25px";
        this.boxCloseDom.style.cursor = "pointer";
        this.boxCloseDom.style.color = "#555";
        
        this.boxDom.appendChild(this.boxCloseDom);

        this.boxDom.appendChild(this.titleDom);
        this.boxDom.appendChild(this.contentDom);
        PmsgBox.appendChild(this.boxDom);


        var _this = this;
        setTimeout(function(){
            _this.boxDom.style.opacity = "1";
            _this.boxDom.style.height = "100px";
        },1);
    }

    PotatogMsg.prototype.bindEvent = function(){
        var _this = this;
        this.boxCloseDom.onclick = function(){
            _this.close();
        }
    }
    
    PotatogMsg.prototype.close = function(){
            var _this = this;
            this.boxDom.style.bottom = parseFloat(getComputedStyle(this.boxDom).getPropertyValue("top")) - 10 + "px";
            this.boxDom.style.opacity = "0";
            this.boxDom.style.height = "0px";
            setTimeout(function(){window.PmsgBox.removeChild(_this.boxDom)},1000);
            if(this.timeOut)clearTimeout(this.timeOut);
    }

    PotatogMsg.prototype.autoClose = function(){
        var _this = this;
        if(this.time > 0)
        {
            this.timeOut = setTimeout(function(){
                _this.close();
            },this.time);
        }
    }
})(window);

pMsg.js

 

 

demo.html

pMsg("4单剩单单","注意",5000);