修改alert样式

最新推荐文章于 2021-07-20 15:36:26 发布
原创最新推荐文章于 2021-07-20 15:36:26 发布 · 528 阅读
1 ·
CC 4.0 BY-SA版权
前端专栏收录该内容
16 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert样式</title>
    <script src="jquery-3.4.0.min.js"></script>
    <style>
        ul{
            list-style:none;
            margin:0px;
            padding:0px;
            width:100%;
        }
        .li1{
            background:#DD828D;
            text-align:left;
            padding-left:20px;
            font-size:14px;
            font-weight:bold;
            height:25px;
            line-height:25px;
            border:1px solid #F9CADE;"
        }
        .li2{
            background:#fff;
            text-align:center;
            font-size:12px;
            height:120px;
            line-height:120px;
            border-left:1px solid #F9CADE;
            border-right:1px solid #F9CADE;
        }
        .li3{
            background:#FDEEF4;
            text-align:center;
            font-weight:bold;
            height:25px;
            line-height:25px;
            border:1px solid #F9CADE;
        }


    </style>
</head>
<body>
    <button id="add">添加成功！</button>
</body>
<script language="javascript" type="text/javascript">
    $("#add").click(function () {
        alert("添加成功！");
    });
    window.alert = function(txt)
    {
        var shield = document.createElement("DIV");
        shield.id = "shield";
        shield.style.position = "absolute";
        shield.style.left = "0px";
        shield.style.top = "0px";
        shield.style.width = "100%";
        shield.style.height = document.body.scrollHeight+"px";
        shield.style.background = "#333";
        shield.style.textAlign = "center";
        shield.style.zIndex = "10000";
        shield.style.filter = "alpha(opacity=0)";
        var alertFram = document.createElement("DIV");
        alertFram.id="alertFram";
        alertFram.style.position = "absolute";
        alertFram.style.left = "50%";
        alertFram.style.top = "50%";
        alertFram.style.marginLeft = "-225px";
        alertFram.style.marginTop = "-75px";
        alertFram.style.width = "450px";
        alertFram.style.height = "150px";
        alertFram.style.background = "#ccc";
        alertFram.style.textAlign = "center";
        alertFram.style.lineHeight = "150px";
        alertFram.style.zIndex = "10001";
        strHtml = "<ul> ";
        strHtml += " <li class='li1'>[系统提示]</li> ";
        strHtml += " <li class='li2'>"+txt+"</li> ";
        strHtml += " <li class='li3'>";
        strHtml += "<input type='button' value='确 定' onclick='doOk()' />";
        strHtml += "<input type='button' value='取 消' onclick='doCancle()'/>";
        strHtml += "</li> ";
        strHtml += "</ul> ";
        alertFram.innerHTML = strHtml;
        document.body.appendChild(alertFram);
        document.body.appendChild(shield);
        var c = 0;
        this.doAlpha = function(){
            if (c++ > 20){clearInterval(ad);return 0;}
            shield.style.filter = "alpha(opacity="+c+");";
        }
        var ad = setInterval("doAlpha()",5);
        this.doOk = function(){
            alertFram.style.display = "none";
            shield.style.display = "none";
        }
        alertFram.focus();
        document.body.onselectstart = function(){return false;};
    }
</script>
</html>