修改弹窗Style

Posted 流水乄心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了修改弹窗Style相关的知识,希望对你有一定的参考价值。

只能自定一个弹窗样式

首先必须明白的一点是,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. 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样 式,完全可以“造假”,合理利用“造假”的方法,可以使你的效果写起来比别人轻松很多。

以上是关于修改弹窗Style的主要内容,如果未能解决你的问题,请参考以下文章

android中popupwindow怎么把一个页面做个弹窗

layer弹窗按钮样式和提示文字内容如何修改?

alert弹窗样式修改

修改el-dialog的弹窗的宽度

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

easyui dialog弹窗问题