`
jkfzero
  • 浏览: 102834 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

弹出提示层

jQueryJavaScriptCSS 
阅读更多

    开始学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>

 

 

0
顶
0
踩
分享到：
| 正则表达式匹配IP
评论
2 楼 greatghoul 2010-04-28  
干嘛不做成jquery插件的形式，也比较容易定制。
1 楼 halk 2009-09-13  
我恨IE6..
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics