JavaScript封装原生公用弹窗

js:

var Popup = {
    /* 
     * alert 弹窗 text 必传
     */
    alert: function(text) {
        var model = document.getElementById('popupMark');
        if (model) {
            var content = document.getElementById('alertText');
            content.innerText = text;
            model.style.display = 'block';
            return
        }
        var creatediv = document.createElement('div'); // 创建div
        creatediv.className = 'popup_mark'; // 添加class
        creatediv.setAttribute('id', 'popupMark'); // 添加ID
        var contentHtml = '<div class="popup_box">' +
            '<h1><img src="http://www.jq22.com/tp/6370052847182084148113881.png"/></h1>' +
            '<p id="alertText">' + text + '</p>' +
            '<h3 id="knowBtn">我知道了</h3>' +
            '<div class="closePopup" id="closePopup"></div>' +
            '</div>'
        creatediv.innerHTML = contentHtml;
        document.body.appendChild(creatediv);
        document.getElementById('closePopup').addEventListener('click', function() {
            Popup.sureAlert();
        })
        document.getElementById('knowBtn').addEventListener('click', function() {
            Popup.sureAlert();
        })
    },
    /* 
     * 确定弹窗
     */
    sureAlert: function() {
        var model = document.getElementById('popupMark');
        model.style.display = 'none'
    },
    confirm: function(text, fn) {
        var model = document.getElementById('popupConfirm');
        if (model) {
            var content = document.getElementById('confirmText');
            content.innerText = text;
            model.style.display = 'block';
            return
        }
        var creatediv = document.createElement('div'); // 创建div
        creatediv.className = 'popup_mark'; // 添加class
        creatediv.setAttribute('id', 'popupConfirm'); // 添加ID
        var contentHtml = '<div class="popup_box">' +
            '<h1><img src="http://www.jq22.com/tp/6370052847182084148113881.png"/></h1>' +
            '<p id="confirmText">' + text + '</p>' +
            '<div class="confirmBtn"><a id="yesConfirm" href="javascript:void(0)">确定</a><a id="cancelConfirm" href="javascript:void(0)">取消</a></div>' +
            '<div class="closePopup" id="closeConfirm"></div>' +
            '</div>'
        creatediv.innerHTML = contentHtml;
        document.body.appendChild(creatediv);
        document.getElementById('closeConfirm').addEventListener('click', function() {
            Popup.closeConfirm();
        })
        document.getElementById('cancelConfirm').addEventListener('click', function() {
            Popup.closeConfirm();
        })
        document.getElementById('yesConfirm').addEventListener('click', function() {
            Popup.sureConfirm(fn);
        })
    },
    closeConfirm: function() {
        var model = document.getElementById('popupConfirm');
        model.style.display = 'none'
    },
    sureConfirm: function(fn) {
        var model = document.getElementById('popupConfirm');
        model.style.display = 'none';
        if (typeof fn == 'function') {
            fn();
        }
    }
}

css:

* {
    margin:0;
    padding:0;
}
a {
    text-decoration:none
}
/* 弹窗 start */
.popup_mark {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    z-index:999;
}
.popup_box {
    width:405px;
    min-height:260px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-202px;
    margin-top:-130px;
    border-radius:8px;
    background:#fff;
}
.popup_box p {
    text-align:center;
    font-size:16px;
    color:#333;
    padding:0 10px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.popup_box h1 {
    width:28px;
    height:28px;
    margin:60px auto 22px;
}
.popup_box h3 {
    width:96px;
    line-height:39px;
    background:rgba(255,152,0,1);
    border-radius:2px;
    font-size:14px;
    color:#fff;
    text-align:center;
    margin:50px auto 0;
    cursor:pointer;
}
.closePopup {
    position:absolute;
    right:11px;
    top:11px;
    width:13px;
    height:13px;
    background:#fff;
    border-radius:50%;
    cursor:pointer;
}
.closePopup:before {
    content:'\0a';
    display:block;
    width:13px;
    height:2px;
    background:#bbb;
    transform:rotate(45deg);
    position:absolute;
    right:0;
    top:6px;
}
.closePopup:after {
    content:'\0a';
    display:block;
    width:13px;
    height:2px;
    background:#bbb;
    transform:rotate(-45deg);
    position:absolute;
    right:0;
    top:6px;
}
.confirmBtn {
    width:100%;
    margin:50px auto 0;
    text-align:center;
}
.confirmBtn a {
    display:inline-block;
    width:94px;
    line-height:37px;
    background:rgba(255,152,0,1);
    border-radius:2px;
    font-size:14px;
    color:#fff;
    text-align:center;
    border:1px solid rgba(255,152,0,1);
}
.confirmBtn a:last-child {
    margin-left:20px;
    background:#fff;
    color:rgba(255,152,0,1);
}

HTML调用:

<div>
    <button id="alert">alert弹窗</button>
    <button id="confirm">confirm弹窗</button>
</div>

<script type="text/javascript">
    function fn() {
        console.log('催定?除？')
    }
    document.getElementById("alert").addEventListener("click", function() {
        Popup.alert("提示下")
    })
    document.getElementById("confirm").addEventListener("click", function() {
        Popup.confirm("催定?除？", fn)
    })
</script>

 

效果: