Js利用Div自定义提示框弹窗+定时器

最新推荐文章于 2023-06-05 16:55:52 发布

原创最新推荐文章于 2023-06-05 16:55:52 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js用div自定义弹窗 #定时器

Html&Js 专栏收录该内容

9 篇文章

订阅专栏

博客主要展示了使用JS结合div自定义弹窗的相关代码，包含Html代码和js代码，同时还涉及定时器内容，并呈现了最终实现的效果，属于前端开发领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Html代码：

   <style type="text/css">
        .alertDivClass {
            position: absolute;
            z-index: 9999;
            width: 350px;
            height: 170px;
            display:block;
            background-color:#E5E3E3;
            margin-top:10%;
            margin-left:30%;
            border-radius:10px;
        }
        .alertMsg {
            font-size:18px;
            font-weight:400;
            text-align:center;
            margin:50px auto auto 18px;

        }
    </style>
    <body>
     <%--提示弹窗--%>
    <div id="alertDivId"></div>
    </body>

js代码：

//定时器：检查当前【待审批】的信息
var setTimePlan = setInterval("onCheckWaitApproval()", 5 * 60 * 1000);


//检查当前【待审批】的信息
function onCheckWaitApproval() {
    $.ajax_({
        method: "GetCheckMsg",
        type: "POST",
        success: function (d) {
            var result = JSON.parse(d.d);
            if (result.Result) {
                var count = result.Msg;
                if (parseInt(count) > 0) {
                    //填充新内容之前，先初始化
                    onCloseAlertDiv();
                    $("#alertDivId").addClass("alertDivClass");
                    var alertDivObj = document.getElementById("alertDivId");
                    alertDivObj.innerHTML = "<div class='alertMsg'><span style='color:red'>新增【" + count + "】条【信息】待审批！</span><br/><br/>" +
                        "<span class='btn r' onclick='onCloseAlertDiv()' style='width:80px;border-radius:3px;'>确&nbsp;&nbsp;定</span></div >";
                }
            }
            else {
                //结束定时器
                clearInterval(setTimePlan);
            }
        },
        error: function (e) {
            //结束定时器
            clearInterval(setTimePlan);
        }
    })
}

//关闭提示窗Div
function onCloseAlertDiv() {
    $("#alertDivId").removeClass("alertDivClass");
    var alertDivObj = document.getElementById("alertDivId");
    alertDivObj.innerHTML = "";
}

效果：