弹出提示层

最新推荐文章于 2022-05-31 09:55:40 发布

iteye_1149

最新推荐文章于 2022-05-31 09:55:40 发布

阅读量148

点赞数

分类专栏： web前端 openApi 文章标签： jQuery JavaScript CSS ViewUI

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

openApi

13 篇文章 0 订阅

订阅专栏

开始学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' οnclick='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>