修改alert样式,重写alert方法

最新推荐文章于 2023-08-30 16:01:57 发布

历经沧桑的少年

最新推荐文章于 2023-08-30 16:01:57 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： JS

本文链接：https://blog.youkuaiyun.com/qq_40530899/article/details/91043614

笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript和CSS实现自定义警告对话框的方法。通过重写原生的alert函数，创建了一个带有确定按钮的弹窗，展示了如何控制样式、内部结构和事件绑定，为用户提供更友好的交互体验。

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

 // 重写alert
    window.alert = alert;
    function alert(data){
        var a = document.createElement("div"),
            p = document.createElement("p"),
            btn = document.createElement("div"),
            textNode = document.createTextNode(data ? data : ""),
            btnText = document.createTextNode("确定");
        // 控制样式
        css(a, {
            'border-radius': '0.24rem',
            "position" : "fixed",
            "left" : "0",
            "right" : "0",
            "top" : "40%",
            "width" : "5rem",
            "margin" : "0 auto",
            "background-color" : "#f8f8f8",
            "font-size" : "0.34rem",
            "text-align" : "center",
            'padding' : '0.3rem 0.3rem 0 0.3rem',
            'min-height' : '2rem'
        });
        css(btn, {
            'margin': '0.5rem auto',
            'line-height': '0.48rem',
            'font-size': '0.24rem',
            'color': '#0f68ae',
            'text-align': 'center',
            'border-radius': '0.24rem',
            'border': '0.02rem solid #0f68ae',
            'width': '1.4rem'
        });
// 内部结构套入
        p.appendChild(textNode);
        btn.appendChild(btnText);
        a.appendChild(p);
        a.appendChild(btn);
// 整体显示到页面内
        document.getElementsByTagName("body")[0].appendChild(a);
// 确定绑定点击事件删除标签
        btn.onclick = function() {
            a.parentNode.removeChild(a);
        }
    };
    function css(targetObj, cssObj) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
        for(var i in cssObj) {
            str += i + ":" + cssObj[i] + ";";
        }
        targetObj.style.cssText = str;
    }