JavaScript中alert()方法重写

学习笔记 马富天 2016-04-25 21:52:09 213 6

【摘要】有的时候你是不是非常不喜欢浏览器自带的alert()窗口,感觉很难看,看不惯了都,那么今天我就教教大伙怎么做一个自定义的alert()界面,其实很简单就是重写系统的alert()方法,那么alert()方法中需要修改或者设置哪些属性呢,请看下面的一串代码。

二话不说,先上代码:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>JavaScript中alert()方法重写</title>
  6. 	</head>
  7. 	<body>
  8. 		<style type="text/css">
  9. 			*{margin:0;padding:0;font-size:12px;}
  10. 			.ul{list-style:none;margin:0px;padding:0px;width:100%}
  11. 			.title{background:#F2F2F2;text-align:left;padding-left:20px;line-height:60px;border:1px solid #999;}
  12. 			.content{background:#D1E0F1;text-align:center;height:95px;line-height:95px;border-left:1px solid #999;border-right:1px solid #999;color:#F0F;}
  13. 			.btn-wrap{background:#F2F2F2;text-align:center;height:60px;line-height:25px; border:1px solid #999;}
  14. 			.btn{width:80px;height:40px;background:#999;margin-top:10px;border:1px solid #FFF;cursor:pointer;color:#333;}
  15. 			.btn:hover{color:#666;}
  16. 		</style>
  17. 		<script type="text/javascript">
  18. 		window.alert = function(str)
  19. 		{
  20. 		    var shield = document.createElement("DIV");
  21. 		    shield.id = "shield";
  22. 		    shield.style.position = "absolute";
  23. 		    shield.style.left = "50%";
  24. 		    shield.style.top = "50%";
  25. 		    shield.style.width = "300px";
  26. 		    shield.style.height = "300px";
  27. 		    shield.style.marginLeft = "-150px";
  28. 		    shield.style.marginTop = "-150px";
  29. 		    shield.style.zIndex = "25";
  30. 		    var alertFram = document.createElement("DIV");
  31. 		    alertFram.id="alertFram";
  32. 		    alertFram.style.position = "absolute";
  33. 		    alertFram.style.width = "300px";
  34. 		    alertFram.style.height = "200px";
  35. 		    alertFram.style.left = "50%";
  36. 		    alertFram.style.top = "0";
  37. 		    alertFram.style.marginLeft = "-140px";
  38. 		    alertFram.style.marginTop = "120px";
  39. 		    alertFram.style.textAlign = "center";
  40. 		    alertFram.style.lineHeight = "150px";
  41. 		    alertFram.style.zIndex = "300";
  42. 		    strHtml = '<ul class="ul">';
  43. 		    strHtml += '<li class="title">myalert</li>';
  44. 		    strHtml += '<li class="content">'+str+'</li>';
  45. 		    strHtml += '<li class="btn-wrap"><input type="button" value="确 定" onclick="doOk()" class="btn"/></li>';
  46. 		    strHtml += '</ul>';
  47. 		    alertFram.innerHTML = strHtml;
  48. 		    document.body.appendChild(alertFram);
  49. 		    document.body.appendChild(shield);
  50. 		    this.doOk = function(){
  51. 		        alertFram.style.display = "none";
  52. 		        shield.style.display = "none";
  53. 		    }
  54. 		    alertFram.focus();
  55. 		    document.body.onselectstart = function(){return false;};
  56. 		}
  57. 		alert('这是自定义的ALERT');
  58. 		</script>
  59. 	</body>
  60. </html>

上面的代码是可以运行的,你可以修改css样式来做一个自己喜欢的样式。熟悉CSS的朋友都知道上面的.style,.position,.display等等都是css样式的属性,其实JavaScript就是通过改变标签的固有属性来设置标签格式的,css跟JavaScript是一样的道理,都是可以控制标签的样式的。

赶快把上面的代码复制下来,自己运行一下,然后读懂代码,不懂的可以问我,在下面留下评论~

最主要的就是window.alert = function(str){}

str是里面的信息,而{}中的方法和属性是自定义的。这就是重写alert()方法的核心。

版权归 马富天PHP博客 所有

本文标题:《JavaScript中alert()方法重写》

本文链接地址:http://www.mafutian.net/64.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

11

8

上一篇《 如何在ThinkPHP下用缓存做每日访问量统计 》 下一篇《 什么是A站、B站、C站、D站、F站 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共6条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多