快审qq
分类目录快审
软文外链发布
原创文章撰写
 
快审详情
快审详情
快审详情
快审详情
快审详情
首页 > 百科资讯

教你修改JavaScript中alert的样式

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


njE网站导航

只能自定一个弹窗样式

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

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


njE网站导航

一行代码替换alert方法
  1. window.alert = function {};njE网站导航

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

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


njE网站导航

实现自定义alert方法的步骤

确定弹窗样式HTML结构 —— 结构插入 —— 样式控制 —— 点击确定删除结构njE网站导航


njE网站导航

确定结构

  1. njE网站导航


    njE网站导航


  2. njE网站导航

    alert内容njE网站导航


    njE网站导航


  3. njE网站导航

    确定njE网站导航


    njE网站导航


  4. njE网站导航


njE网站导航

使用JS处理结构

于是有了下面这段代码:njE网站导航

  1. window.alert = alert;njE网站导航

  2. function alert(data) {njE网站导航

  3. var a = document.createElement("div"),//创建最外围标签njE网站导航

  4. p = document.createElement("p"),//创建显示内容的p标签njE网站导航

  5. btn = document.createElement("div"),//创建按钮标签njE网站导航

  6. textNode = document.createTextNode(data),//创建一个文字节点njE网站导航

  7. btnText = document.createTextNode("确定");//创建文字节点njE网站导航

  8. // 内部结构套入njE网站导航

  9. p.appendChild(textNode);//将需要显示的内容节点插入p标签内njE网站导航

  10. btn.appendChild(btnText);//将按钮文字插入按钮标签njE网站导航

  11. a.appendChild(p);//将p标签插入外围divnjE网站导航

  12. a.appendChild(btn);//将按钮插入外围divnjE网站导航

  13. // 整体显示到页面内njE网站导航

  14. document.getElementsByTagName("body")[0].appendChild(a);njE网站导航

  15. }njE网站导航

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

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


njE网站导航

优化当前的JS代码

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

  1. window.alert = alert;njE网站导航

  2. function alert(data) {njE网站导航

  3. var a = document.createElement("div"),njE网站导航

  4. p = document.createElement("p"),njE网站导航

  5. btn = document.createElement("div"),njE网站导航

  6. textNode = document.createTextNode(data ? data : ""),njE网站导航

  7. btnText = document.createTextNode("确定");njE网站导航

  8. // 内部结构套入njE网站导航

  9. p.appendChild(textNode);njE网站导航

  10. btn.appendChild(btnText);njE网站导航

  11. a.appendChild(p);njE网站导航

  12. a.appendChild(btn);njE网站导航

  13. // 整体显示到页面内njE网站导航

  14. document.getElementsByTagName("body")[0].appendChild(a);njE网站导航

  15. // 确定绑定点击事件删除标签njE网站导航

  16. btn.onclick = function {njE网站导航

  17. a.parentNode.removeChild(a);njE网站导航

  18. }njE网站导航

  19. }njE网站导航


njE网站导航

样式控制

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

  1. function css(targetObj, cssObj) {njE网站导航

  2. for(var i in cssObj) {njE网站导航

  3. targetObj.style[i] = cssObj[i];njE网站导航

  4. }njE网站导航

  5. }njE网站导航

这样我们就可以通过如下方式控制样式:njE网站导航

  1. css(target, {njE网站导航

  2. “background-color” : “red”,njE网站导航

  3. “text-align” : “center”,njE网站导航

  4. })njE网站导航


njE网站导航

wait wait,还没完

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

  1. function css(targetObj, cssObj) {njE网站导航

  2. var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";njE网站导航

  3. for(var i in cssObj) {njE网站导航

  4. str += i + ":" + cssObj[i] + ";";njE网站导航

  5. }njE网站导航

  6. targetObj.style.cssText = str;njE网站导航

  7. }njE网站导航

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


 njE网站导航

此文由 网站导航 编辑,未经允许不得转载!:

评论 暂无评论
-->
网站目录 | 网站导航 | 中文分类目录 | 目录提交 | 关于我们 | 联系我们 | 免责声明 | 意见反馈 | 网站地图