js实现一个div弹窗附带定时关闭

因为js自带的alert弹窗太丑且需要用户点击后才能关闭，所以用js+div实现一个弹窗,且附带定时关闭功能

代码如下：

style样式：

 /*背景层*/
        #popLayer {
            display: none;
            background-color: #B3B3B3;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80); /* 只支持IE6、7、8、9 */
        }

        /*弹出层*/
        #popBox {
            display: none;
            /*background-color: #FFFFFF;*/
            z-index: 11;
            width: 250px;
            height: 180px;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            border-radius: 5px;
        }

        #popBox .close {
            text-align: right;
            margin-right: 5px;
            background-color: #F8F8F8;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        /*关闭按钮*/
        #popBox .close a {
            text-decoration: none;
            color: #2D2C3B;
        }

页面div代码，因为我设置一秒后自动关闭，所以注释了关闭按钮

<div id="popLayer"></div>
<div id="popBox" style="width: 50%;height: 50%;">
    <%--<div class="close">--%>
    <%--<a href="javascript:void(0)" οnclick="closeBox()">关闭</a>--%>
    <%--</div>--%>
    <div class="content" id="content" style="text-align: center;background-color: #ffffff;">
        <div style="width: 100%;height: 15%;margin-bottom: 20px;">
            <h2 style="margin-top:30px;margin-bottom: 0px;font-family: 微软雅黑;font-size: 48px;">提示信息</h2>
        </div>
        <span id="span_id" style="font-family: 微软雅黑;font-size: 40px;">这里是提示信息</span>
        <div style="font-family: 微软雅黑;font-size: 20px;color: black;margin-top: 10px;">
            (一秒后自动关闭)
        </div>
    </div>
</div>

js代码

 /*点击弹出按钮*/
    function popBox(msg1) {
        //获取背景div
        var popBox = document.getElementById("popBox");
        //获取显示的div框
        var popLayer = document.getElementById("popLayer");
        var content = document.getElementById("content");
        //设置显示内容
        document.getElementById("span_id").innerHTML = ""+msg1+"";
        //设置定时关闭时间 此处为毫秒1200=1.2s
        setTimeout("document.getElementById('popLayer').style.display='none'",1200);
        setTimeout("document.getElementById('popBox').style.display='none'",1200);
        //设置为可见
        popBox.style.display = "block";
        popLayer.style.display = "block";
    };

    /*点击关闭按钮*/
    function closeBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
    }

好了，至此就可以使用啦