修改alert样式,重写alert方法

本文介绍了一种使用纯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;
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值