弹出提示层

    开始学Javascript用的提示都是Alert。一成不变的样式很令人讨厌，而且与整个网站的风格很不协调。用户体验也不好。

现在重新写一个弹出层的组件，很多地方都可以自定义了。

    写的很简单，其实不直接将Styel设定好而只是设定好Class，然后用Css来控制控件的样式。

    没有重复生成消除层而只是将它隐藏是因为反复生成销毁的话开销太大。

 

 

<script language="javascript" defer>function getPageSize(){
var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;
var width = pageWidth>winWidth?pageWidth:winWidth;
var height = pageHeight>winHeight?pageHeight:winHeight;
return {"width":width,"height":height};
}
function makeAlert(message){
	var alertPanel = document.getElementById("alt");
	if(!alertPanel){
		alertPanel = document.createElement("div");
		alertPanel.setAttribute('id','alt');
		var pageSize = getPageSize();
		alertPanel.style.left = pageSize.width/2 - 250 + "px";
		alertPanel.style.top = pageSize.height/2 + "px";
		alertPanel.style.width = "500px";
		alertPanel.style.height = "300px";
		alertPanel.style.position = "absolute";
		alertPanel.style.padding = "50px";
		alertPanel.style.backgroundColor = '#EFEFEF';
		alertPanel.style.filter = "alpha(opacity=30)";
		alertPanel.style.opacity = "0.3";
		alertPanel.innerHTML = "<div style='height:150px;background-color:#CCC;'>"+message+"</div><div style='height:65px;padding:15px;background-color:#BBB;text-align:center'><input value='Close' type='button' onclick='closeAlert()'/></div>";
		document.body.appendChild(alertPanel);
	}
	alertPanel.style.display = "";
	
}
function closeAlert(){
	var alertPanel = document.getElementById("alt");
	alertPanel.style.display = "none";
}
</script>
<body><input type="button" value="Pop" onClick="makeAlert('haha');"/></body>