只能自定一个弹窗样式
首先必须明白的一点是，alert只是一个方法，而这个方法内部是native code，这是我们无法修改的部分，而最终暴露的只有这个alert方法名字而已，你甚至拿不到alert的属性，因此要真正意义上的做到修改alert样式是不可行的。
有了以上这个条件基础，我们能做的只有重写alert方法，替换掉系统自带的alert方法。
一行代码替换alert方法
- window.alert = function {};
看到这，就有很多人已经明了了，首先你可以先写好一个假的弹窗样式，然后通过这种方式显示出来，这种是html css js 三方同时更改达到效果，你也可以全部都JavaScript去完成结构样式的操作，今天我们的示例就是全部通过js来完成结构样式控制。
明确了基本方式是通过替换alert方法，那么就开始进一步的思考实现步骤。
实现自定义alert方法的步骤
确定弹窗样式HTML结构 —— 结构插入 —— 样式控制 —— 点击确定删除结构
确定结构
1. <div>
2. <p>alert内容</p>
3. <div>确定</div>
4. </div>使用JS处理结构
于是有了下面这段代码：
1. window.alert = alert;
2. function alert(data) {
3. var a = document.createElement("div"),//创建最外围标签
4. p = document.createElement("p"),//创建显示内容的p标签
5. btn = document.createElement("div"),//创建按钮标签
6. textNode = document.createTextNode(data),//创建一个文字节点
7. btnText = document.createTextNode("确定");//创建文字节点
8. // 内部结构套入
9. p.appendChild(textNode);//将需要显示的内容节点插入p标签内
10. btn.appendChild(btnText);//将按钮文字插入按钮标签
11. a.appendChild(p);//将p标签插入外围div
12. a.appendChild(btn);//将按钮插入外围div
13. // 整体显示到页面内
14. document.getElementsByTagName("body")[0].appendChild(a);
15. }这 里为什么不直接用window.alert = function {};方法呢，这里考虑预编译时并不会对window.alert进行赋值，如果用这种方式写的话，在window.alert = function {} 之前调用alert还会是系统自带alert。
当你初步调用alert时，如果不传参数会报错，那么我们需要一个data的判 断，textNode = document.createTextNode(data)就可改成textNode = document.createTextNode(data ? data : "")
优化当前的JS代码
接下来我们会发现，我们还缺少样式和确定关闭功能。这里完全可以用DOM0级事件绑定。代码很快变成了这样：
1. window.alert = alert;
2. function alert(data) {
3. var a = document.createElement("div"),
4. p = document.createElement("p"),
5. btn = document.createElement("div"),
6. textNode = document.createTextNode(data ? data : ""),
7. btnText = document.createTextNode("确定");
8. // 内部结构套入
9. p.appendChild(textNode);
10. btn.appendChild(btnText);
11. a.appendChild(p);
12. a.appendChild(btn);
13. // 整体显示到页面内
14. document.getElementsByTagName("body")[0].appendChild(a);
15. // 确定绑定点击事件删除标签
16. btn.onclick = function {
17. a.parentNode.removeChild(a);
18. }
19. }
样式控制
还剩下最后一个样式控制问题。为了写起来更美观更方便，我们需要写一个方法来控制样式。
1. function css(targetObj, cssObj) {
2. for(var i in cssObj) {
3. targetObj.style[i] = cssObj[i];
4. }
5. }
这样我们就可以通过如下方式控制样式：
1. css(target, {
2. “background-color” : “red”,
3. “text-align” : “center”,
4. })
wait wait，还没完
测试后发现，如上的这种样式书写方式，IE8下面有渲染问题，那我们换成cssText。所以，样式控制代码改为——>
1. function css(targetObj, cssObj) {
2. var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
3. for(var i in cssObj) {
4. str += i + ":" + cssObj[i] + ";";
5. }
6. targetObj.style.cssText = str;
7. }这样咱就解决IE8的尴尬了，但是同时也带来了其他问题，字符串拼接，有可能会出现重复属性，因此如果你需要做一个通用的，还需要对字符串进行查重，但对于本例来说完全够用了。
完成版的alert功能
我们的demo就成了这样（样式还是自己调吧，下面的样式只是做个示范）：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML5学堂 - alert</title>
6. </head>
7. <body>
8. <script>
9. window.alert = alert;
10. function alert(data) {
11. var a = document.createElement("div"),
12. p = document.createElement("p"),
13. btn = document.createElement("div"),
14. textNode = document.createTextNode(data ? data : ""),
15. btnText = document.createTextNode("确定");
16. // 控制样式
17. css(a, {
18. "position" : "fixed",
19. "left" : "0",
20. "right" : "0",
21. "top" : "20%",
22. "width" : "100px",
23. "margin" : "0 auto",
24. "background-color" : "#f00",
25. "font-size" : "20px",
26. "text-align" : "center"
27. });
28. css(btn, {
29. "background" : "blue",
30. })
31. // 内部结构套入
32. p.appendChild(textNode);
33. btn.appendChild(btnText);
34. a.appendChild(p);
35. a.appendChild(btn);
36. // 整体显示到页面内
37. document.getElementsByTagName("body")[0].appendChild(a);
38. // 确定绑定点击事件删除标签
39. btn.onclick = function {
40. a.parentNode.removeChild(a);
41. }
42. }
43. function css(targetObj, cssObj) {
44. var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
45. for(var i in cssObj) {
46. str += i + ":" + cssObj[i] + ";";
47. }
48. targetObj.style.cssText = str;
49. }
50. alert(123);
51. </script>
52. </body>
53. </html>最 后总结下，本例运用到的知识点，DOM操作、预编译期与执行、for-in循环，cssText。本文的主要目的在于引导思路，无论做什么项目，思路很重 要，要懂得变通，如果你想通过某些属性去修改alert样式，那你想破头都想不出，所有效果实现方法都不是唯一的，仅仅只是需要一个你想要的alert样 式，完全可以“造假”，合理利用“造假”的方法，可以使你的效果写起来比别人轻松很多。
