点击动态创建弹出框，2S后自动关闭。（用以替换alert弹窗，样式好看，并且不需要点确定）

工作中，有时会碰到alert弹窗样式不好看，而且需要点击确定才能继续往下执行这样的问题，所以自己写了一个弹窗，有原生版本和jq版本，大家可以根据需要修改其中的一些样式，希望对大家有所帮助。
下面上代码：<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击出现弹窗</title>
    <script type="text/javascript" src="./jquery-1.11.0.js"></script>
    <style>
        /*弹出框公共样式（兼容IE）*/
        .pop_up{
            position: fixed;
            width: 450px;
            top: 50%;
            left: 50%;
            margin-left: -225px;
            margin-top: -38px;
            display: table;
            color: white;
            z-index: 100;
            border-radius: 5px;
        }
        .pop_up p{
            display: table-cell;
            font-size: 16px;
            line-height: 16px;
            margin: 0 auto;
            padding: 30px 15px;
            text-align: center;
        }
        .pop_up p span{
            font-weight: bold;
        }
        .pop_up{
            background: -webkit-linear-gradient(#ffc8ba, #e4451c) !important;
            background: -o-linear-gradient(#ffc8ba, #e4451c) !important; 
            background: -moz-linear-gradient(#ffc8ba, #e4451c) !important;
            background: linear-gradient(#ffc8ba, #e4451c) !important;
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc8ba, endColorstr=#e4451c) !important;/*IE<9>*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffc8ba, endColorstr=#e4451c) !important;";/*IE8+*/
            display: none;
        }
    </style>
</head>
<body>
    <p id="tanJq">点击出现jq版弹窗</p>
    <p id="tanProto">点击出现原生版弹窗</p>
</body>
</html>
<script>
    //弹窗jq版
    function popWindow(data){
        var windowHtml = '<div class="pop_up">'+
                            '<p><span class="pop_content">'+data+'</span></p>'+
                        '</div>'
        $('body').append(windowHtml);
        $(".pop_up").css('display','table');
        var myTimer = setTimeout(function(){
            $(".pop_up").remove();
        },2000)
    }    $('#tanJq').click(function(){
        var aaa = 'jq版！'
        popWindow("弹出来吧!"+aaa)
    })
</script>
<script>
    function dolor(str){
        if(str.charAt(0) == '#'){
            return document.getElementById(str.substring(1));
        }else if(str.charAt(0) == '.'){
            return document.getElementsByClassName(str.substring(1));
        }else{
            return document.getElementsByTagName(str);
        }
    }
    //弹窗原生版
    function popProto(data){
        var divObj = document.createElement("div");
        divObj.className = "pop_up";
        dolor("body")[0].appendChild(divObj);
        var pObj = document.createElement('p');
        divObj.appendChild(pObj);
        var spanObj = document.createElement('span');
        spanObj.innerHTML = data;
        pObj.appendChild(spanObj);
        dolor(".pop_up")[0].style.display = 'table';
        var myTimer = setTimeout(function(){
            dolor('body')[0].removeChild(dolor('.pop_up')[0]);
        },2000)
    }
    
    dolor('#tanProto').onclick = function(){
        var aaa = '原生版！'
        popProto("弹出来吧!"+aaa)
    }
</script>