HTML5学堂-码匠 HTML5学堂

您当前位于:DOM 文档操作 ——> 如何修改alert弹窗的具体样式?

如何修改alert弹窗的具体样式?

2016/03/12 17:26:17 | 作者:HTML5学堂(码匠) | 分类:DOM 文档操作 | 关键词:alert,弹窗样式,修改弹窗样式

如何修改alert样式

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

只能自定一个弹窗样式

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

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

一行代码替换alert()方法

  1. 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.     // 确定绑定点击事件删除标签
  17.     btn.onclick = function() {
  18.         a.parentNode.removeChild(a);
  19.     }
  20. }

样式控制

还剩下最后一个样式控制问题。为了写起来更美观更方便,我们需要写一个方法来控制样式。

  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.             // 确定绑定点击事件删除标签
  40.             btn.onclick = function() {
  41.                 a.parentNode.removeChild(a);
  42.             }
  43.         }
  44.         function css(targetObj, cssObj) {
  45.             var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";
  46.             for(var i in cssObj) {
  47.                 str += i + ":" + cssObj[i] + ";";
  48.             }
  49.             targetObj.style.cssText = str;
  50.         }
  51.         alert(123);
  52.     </script>
  53. </body>
  54. </html>

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

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS