js封装好的模仿qq消息弹窗代码-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: <p>在我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。</p> <p>直接贴代码:</p> <p></p> <pre code_snippet_id="333533" snippet_file_name="blog_20140508_1_1410571" name="code" class="html">&lt;!DOCTYPE htm

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章