封装一个小巧的消息提示框，纯es5

自己动手封装一个小巧的消息提示框

css

		.shadow {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            z-index: 10;
            position: absolute;
            top: 0;
        }

        .shadow .msgBox {
            z-index: 11;
            position: absolute;
            bottom: 0;
            top: 0;
            right: 0;
            left: 0;
            margin: auto;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        .shadow .msgBox span {
            display: inline-block;
            border-radius: 20px;
            background-color: skyblue;
            padding: 5px 20px;

        }

//js

function newMsg() {
            function Msg() {
                this.settings = {
                    shadow: true,
                    text: 'test',
                    timer: 2
                }
            }
            Msg.prototype.show = function (opt) {
                this.extend(this.settings, opt)
                var that = this
                var shadowDom = document.createElement('div')
                var str = '<div class="msgBox">' +
                    '<span class="msg">' + this.settings.text + '</span>' +
                    '</div>'

                shadowDom.innerHTML = str
                shadowDom.className = "shadow"
                document.body.appendChild(shadowDom)
                if (!(this.settings.shadow)) {
                    document.getElementsByClassName('shadow')[0].style.backgroundColor = 'rgba(0, 0, 0, 0)'
                }
                setTimeout(function () {
                    that.hide()
                }, this.settings.timer * 1000)
            }
            Msg.prototype.hide = function () {
                document.getElementsByClassName('shadow')[0].remove()
            }
            Msg.prototype.extend = function (obj1, obj2) {
                for (var key in obj2) {
                    obj1[key] = obj2[key]
                }
            }
            return new Msg()
        }

//使用
     var msg = newMsg()
     msg.show({
                text: "哈哈",
                timer:3,
                shadow:true
            })