SOURCE

(function (window, document) {
    let Msg = function (options) {this._init(options)}
    
    Msg.prototype._init = function ({ content = '',cancel = null,confirm = null, 
    useHTML = false,contentStyle={},contentFontSize='1.5em',title=""}) {
        this.content = content;
        this.cancel = cancel;
        this.confirm = confirm;
        this.contentStyle = contentStyle;
        this.useHTML = useHTML;
        this.contentFontSize = contentFontSize;
        this.title = title;
        
        this._createElement();
        this._bind([this._el, this._overlay]);
        this._show([this._el, this._overlay]);
    }

    Msg.prototype._createElement = function () {
        let wrap = document.createElement('div');
        wrap.className = 'msg__wrap';
        wrap.innerHTML = `<div class="msg-header">
        <span>${this.title}</span>
        <span class="msg-header-close-button">×</span>
    </div>
    <div class="msg-body">
        <div class="msg-body-content"></div>
    </div>
    <div class="msg-footer">
        <button class="msg-footer-btn msg-footer-cancell-button">取消</button>
        <button class="msg-footer-btn msg-footer-confirm-button">确认</button>
    </div>`
        let contentDOM = wrap.querySelector('.msg-body-content')
        const contentStyle = {
            fontSize: this.contentFontSize,
            ...this.contentStyle
        }
        for (let i in contentStyle) {
            if(contentStyle.hasOwnProperty(i)){
                contentDOM.style[i] = contentStyle[i]
            }
        }
        if(this.useHTML){
            contentDOM.innerHTML = this.content
        } else {
            contentDOM.innerText = this.content
        }
        let overlay = document.createElement('div');
        overlay.className = 'msg__overlay';
        this._el = wrap;
        this._overlay = overlay;
    }

    Msg.prototype._bind = function ([el, overlay]) {
        let _this = this
        const hideMsg = function () {
            el.style.transform = 'translate(-50%,-50%) scale(0,0)';
            overlay.style.opacity = '0';
            setTimeout(()=>{
                document.body.removeChild(el);
                document.body.removeChild(overlay);
            },300)
        }
        const cancel = function(e){
            _this.cancel && _this.cancel.call(_this,e)
            hideMsg();
        }
        const confirm = function(e){
            _this.confirm && _this.confirm.call(_this,e)
            hideMsg();
        }
        el.querySelector('.msg-header-close-button').addEventListener('click', cancel);
        el.querySelector('.msg-footer-cancell-button').addEventListener('click', cancel);
        overlay.addEventListener('click', cancel);
        el.querySelector('.msg-footer-confirm-button').addEventListener('click', confirm);
    }

    Msg.prototype._show = function ([el, overlay]) {
        document.body.appendChild(el);
        document.body.appendChild(overlay);
        setTimeout(() => {
            el.style.transform = 'translate(-50%,-50%) scale(1,1)';
            overlay.style.opacity = '1';
        })
    }

    window.$Msg = Msg;

})(window, document)

document.querySelector('#pop').addEventListener('click', function () {
    new $Msg({ 
        content: "真的要删除吗<span style='color:blue'>?</span>",
        useHTML:true,
        confirm: function(e) {
            console.log('confirm')
            console.log(this)
        },
        cancel: function(e) {
            console.log('cencel')
            console.log(this)
        },
        contentStyle:{
            color:'red'
        },
        title:"警告"
     })
})

<button id="pop">弹出框</button>

.msg__wrap {
    position: absolute;
    width: 200px;
    height: 100px;
    background: white;
    top: 50%;
    right: 50%;
    margin-top: -40px;
    margin-right: -100px;
    box-sizing: border-box;
    padding: 5px;
    transition: all .3s;
    transform: translate(-50%,-50%) scale(0,0);
    z-index: 6;
}

.msg-header {
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
}

.msg-header-close-button {
    float: right;
    padding-right: 5px
}

.msg-body {
    height: 40px;
    font-size: 12px;
    box-sizing: border-box;
    padding: 10px
}

.msg-footer {
    float: right;
}

.msg__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    background-color: rgba(0,0,0,.4);
    transition: all .3s;
    opacity: 0;
}