码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-05-08 16:13:07      阅读:374      评论:0      收藏:0      [点我收藏+]

标签:js   qq弹出窗   html广告   js悬浮广告   qq冒泡弹出窗   

在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用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

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

标签:js   qq弹出窗   html广告   js悬浮广告   qq冒泡弹出窗   

原文地址:http://blog.csdn.net/xmtblog/article/details/22999351

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!