如何修改alert样式

HTML5学堂:无论是PC还是移动端,系统自带alert样式总是让人感觉很丑陋,今天就教大家如何修改alert弹窗样式。

只能自定一个弹窗样式

首先必须明白的一点是,alert()只是一个方法,而这个方法内部是native code,这是我们无法修改的部分,而最终暴露的只有这个alert()方法名字而已,你甚至拿不到alert的属性,因此要真正意义上的做到修改alert样式是不可行的。

有了以上这个条件基础,我们能做的只有重写alert()方法,替换掉系统自带的alert()方法。

一行代码替换alert()方法

window.alert = function() {};

看到这,就有很多人已经明了了,首先你可以先写好一个假的弹窗样式,然后通过这种方式显示出来,这种是html css js 三方同时更改达到效果,你也可以全部都JavaScript去完成结构样式的操作,今天我们的示例就是全部通过js来完成结构样式控制。

明确了基本方式是通过替换alert()方法,那么就开始进一步的思考实现步骤。

实现自定义alert()方法的步骤

确定弹窗样式HTML结构 —— 结构插入 —— 样式控制 —— 点击确定删除结构

确定结构

<div>
    <p>alert内容</p>
    <div>确定</div>
</div>

使用JS处理结构

于是有了下面这段代码:

window.alert = alert;
function alert(data) {
    var a = document.createElement("div"),//创建最外围标签
        p = document.createElement("p"),//创建显示内容的p标签
        btn = document.createElement("div"),//创建按钮标签
        textNode = document.createTextNode(data),//创建一个文字节点
        btnText = document.createTextNode("确定");//创建文字节点
    // 内部结构套入
    p.appendChild(textNode);//将需要显示的内容节点插入p标签内
    btn.appendChild(btnText);//将按钮文字插入按钮标签
    a.appendChild(p);//将p标签插入外围div
    a.appendChild(btn);//将按钮插入外围div
    // 整体显示到页面内
    document.getElementsByTagName("body")[0].appendChild(a);
}

这里为什么不直接用window.alert = function() {};方法呢,这里考虑预编译时并不会对window.alert进行赋值,如果用这种方式写的话,在window.alert = function() {} 之前调用alert()还会是系统自带alert。

当你初步调用alert()时,如果不传参数会报错,那么我们需要一个data的判断,textNode = document.createTextNode(data)就可改成textNode = document.createTextNode(data ? data : "")

优化当前的JS代码

接下来我们会发现,我们还缺少样式和确定关闭功能。这里完全可以用DOM0级事件绑定。代码很快变成了这样:

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("确定");
    // 内部结构套入
    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) {
    for(var i in cssObj) {
        targetObj.style[i] = cssObj[i];
    }
}

这样我们就可以通过如下方式控制样式:

css(target, {
    “background-color” : “red”,
    “text-align” : “center”,
})

wait wait,还没完

测试后发现,如上的这种样式书写方式,IE8下面有渲染问题,那我们换成cssText。所以,样式控制代码改为——>

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;
}

这样咱就解决IE8的尴尬了,但是同时也带来了其他问题,字符串拼接,有可能会出现重复属性,因此如果你需要做一个通用的,还需要对字符串进行查重,但对于本例来说完全够用了。

完成版的alert功能

我们的demo就成了这样(样式还是自己调吧,下面的样式只是做个示范):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5学堂 - alert</title>
</head>
<body>
    <script>
        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, {
                "position" : "fixed",
                "left" : "0",
                "right" : "0",
                "top" : "20%",
                "width" : "100px",
                "margin" : "0 auto",
                "background-color" : "#f00",
                "font-size" : "20px",
                "text-align" : "center"
            });
            css(btn, {
                "background" : "blue",
            })
            // 内部结构套入
            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;
        }
        alert(123);
    </script>
</body>
</html>

最后总结下,本例运用到的知识点,DOM操作、预编译期与执行、for-in循环,cssText。本文的主要目的在于引导思路,无论做什么项目,思路很重要,要懂得变通,如果你想通过某些属性去修改alert样式,那你想破头都想不出,所有效果实现方法都不是唯一的,仅仅只是需要一个你想要的alert样式,完全可以“造假”,合理利用“造假”的方法,可以使你的效果写起来比别人轻松很多。

本文章内容小编:HTML5学堂-其其。耗时3h~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-03-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

VUE 入门基础(9)

十一,深入响应式原理    声明响应式属性     由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值。 ...

2275
来自专栏吴裕超

vue .sync修饰符的使用

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显...

1172
来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

2862
来自专栏练小习的专栏

可视化格式模型-相对定位

一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响: B2在定位时,...

1828
来自专栏老秦求学

百练 石头剪刀布

总时间限制: 1000ms内存限制: 65536kB描述 石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。 一天,小...

3467
来自专栏前端小叙

动态添加的html元素绑定事件的方法

在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二;

904
来自专栏web

慕课网javascript 进阶篇 第九章 编程练习

1284
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

472
来自专栏Python攻城狮

Javascript(2)-js进阶

备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

1333
来自专栏河湾欢儿的专栏

标签类型

标签类型 块 1.独占一行 2.支持所有样式 3.不设置宽度的时候,宽度撑满整个一行 内嵌 1.可以在一行显示 2.不支持宽高,不支持上下的mar...

913

扫码关注云+社区