打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

JavaScript中alert()方法重写

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

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

二话不说，先上代码：

```
<!DOCTYPE html>
```
```
<html>
```
```
	<head>
```
```
		<meta charset="UTF-8">
```

		<title>JavaScript中alert()方法重写</title>

```
	</head>
```
```
	<body>
```
```
		<style type="text/css">
```

			*{margin:0;padding:0;font-size:12px;}

			.ul{list-style:none;margin:0px;padding:0px;width:100%}

			.title{background:#F2F2F2;text-align:left;padding-left:20px;line-height:60px;border:1px solid #999;}

			.content{background:#D1E0F1;text-align:center;height:95px;line-height:95px;border-left:1px solid #999;border-right:1px solid #999;color:#F0F;}

			.btn-wrap{background:#F2F2F2;text-align:center;height:60px;line-height:25px; border:1px solid #999;}

			.btn{width:80px;height:40px;background:#999;margin-top:10px;border:1px solid #FFF;cursor:pointer;color:#333;}

```
			.btn:hover{color:#666;}
```
```
		</style>
```
```
		<script type="text/javascript">
```
```
		window.alert = function(str)
```
```
		{
```

		    var shield = document.createElement("DIV");

```
		    shield.id = "shield";
```

		    shield.style.position = "absolute";

```
		    shield.style.left = "50%";
```
```
		    shield.style.top = "50%";
```
```
		    shield.style.width = "300px";
```
```
		    shield.style.height = "300px";
```

		    shield.style.marginLeft = "-150px";

		    shield.style.marginTop = "-150px";

```
		    shield.style.zIndex = "25";
```

		    var alertFram = document.createElement("DIV");

```
		    alertFram.id="alertFram";
```

		    alertFram.style.position = "absolute";

```
		    alertFram.style.width = "300px";
```
```
		    alertFram.style.height = "200px";
```
```
		    alertFram.style.left = "50%";
```
```
		    alertFram.style.top = "0";
```

		    alertFram.style.marginLeft = "-140px";

		    alertFram.style.marginTop = "120px";

		    alertFram.style.textAlign = "center";

		    alertFram.style.lineHeight = "150px";

```
		    alertFram.style.zIndex = "300";
```
```
		    strHtml = '<ul class="ul">';
```

		    strHtml += '<li class="title">myalert</li>';

		    strHtml += '<li class="content">'+str+'</li>';

		    strHtml += '<li class="btn-wrap"><input type="button" value="确 定" onclick="doOk()" class="btn"/></li>';

```
		    strHtml += '</ul>';
```
```
		    alertFram.innerHTML = strHtml;
```

		    document.body.appendChild(alertFram);

		    document.body.appendChild(shield);

```
		    this.doOk = function(){
```

		        alertFram.style.display = "none";

		        shield.style.display = "none";

```
		    }
```
```
		    alertFram.focus();
```

		    document.body.onselectstart = function(){return false;};

```
		}
```
```
		alert('这是自定义的ALERT');
```
```
		</script>
```
```
	</body>
```
```
</html>
```

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

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

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

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

版权归马富天个人博客所有

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

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

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

顶11

踩8

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

所有评论

第 6 楼 aaa 2017-12-18 10:09:03 山西太原

把Script里的东西封装成JS css里的业封装成css 在网页里调用一下js和CSS就能直接用
第 5 楼 1 2017-10-10 15:19:58 福建福州

=21]
第 4 楼 王明 2016-12-29 13:32:44 江苏苏州

alertFram.focus(); document.body.onselectstart = function(){return false;}; 这两行是什么意思
第 3 楼 yjh 2016-12-22 17:53:43 江苏苏州

怎么调用，大哥。你等说清楚呀！
第 2 楼 筱鼬 2016-11-08 16:38:24 河南郑州

这个，怎么调用难道，每个有alert的地方都要写这么长吗？
第 1 楼 成航先森 2016-04-26 08:57:04 北京北京

原来这个窗口也可以自定义啊？！厉害