js封装好的模仿qq消息弹窗代码

时间：2014-05-08 16:13:07 收藏：0 阅读：374

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。

直接贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>javaScript实现网页右下角弹出窗口代码</title>
</head>
<body>
<script type="text/javascript">
var ShowMsg={
	title:‘提示‘,
	content:‘模拟qq弹出框消息提醒‘,
	width:‘300px‘,
	height:‘100px‘,
	setTitle:function(value){
		this.title=value;
	},
	setContent:function(value){
		this.content=value;
	},
	getTitle:function(){
		return this.title;
	},
	getContent:function(){
		return this.content;
	},
	show:function(){
		//弹窗div
		var _winPopDiv = document.createElement(‘div‘);  
			_winPopDiv.id="_winPopDiv";  
			_winPopDiv.style.cssText = ‘width:300px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:block;‘;
		//消息标题div
		var _titleDiv= document.createElement(‘div‘);  
			_titleDiv.id="_titleDiv";   
			_titleDiv.innerHTML=this.getTitle();  
			_titleDiv.style.cssText = ‘width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:left; font-size:14px;‘;  
			_winPopDiv.appendChild(_titleDiv);
		//关闭消息按钮span
		var _closeSpan= document.createElement(‘span‘);  
			_closeSpan.id="_closeSpan"; 
			_closeSpan.innerHTML="X";
			_closeSpan.style.cssText = ‘position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer;font-size:14px;‘;  
			_titleDiv.appendChild(_closeSpan); 
		//内容div
		var _conDiv= document.createElement(‘div‘); 
			_conDiv.id="_conDiv";  
			_conDiv.style.cssText = ‘width:100%; height:110px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center;‘;  
			_conDiv.innerHTML=this.getContent();
			_winPopDiv.appendChild(_conDiv);    
		document.body.appendChild(_winPopDiv);  
	    //关闭span绑定事件
		var closeDiv = document.getElementById("_closeSpan");
		if(closeDiv.addEventListener){
			closeDiv.addEventListener("click",function(e){ 
				if (window.event != undefined) {  
					window.event.cancelBubble = true;  
				} else if (e.stopPropagation) {  
					e.stopPropagation();  
				}  
				document.getElementById(‘_winPopDiv‘).style.cssText="display:none;";
			},false);
		}else if(closeDiv.attachEvent){
			closeDiv.attachEvent("onclick",function(e){  
				if (window.event != undefined) {  
					window.event.cancelBubble = true;  
				} else if (e.stopPropagation) {  
					e.stopPropagation();  
				}  
				document.getElementById(‘_winPopDiv‘).style.cssText="display:none;";
			});
		}
	}
};
ShowMsg.show();
</script>
</body>
</html>

一下为实例的截图：

bubuko.com,布布扣

点击下载源代码：http://download.csdn.net/download/xmt1139057136/7156929

欢迎大家关注我的个人博客，或者加qq群135430763共同学习！

js封装好的模仿qq消息弹窗代码,布布扣,bubuko.com