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

最新推荐文章于 2023-02-21 13:27:25 发布

业余草

最新推荐文章于 2023-02-21 13:27:25 发布

阅读量3.8k

点赞数 4

分类专栏： html Jsp JavaScript java java web高级开发文章标签： js qq弹出窗 html广告 js悬浮广告 qq冒泡弹出窗

本文链接：https://blog.csdn.net/xmtblog/article/details/22999351

版权

java 同时被 3 个专栏收录

109 篇文章 5 订阅

订阅专栏

java web高级开发

31 篇文章 9 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

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

一下为实例的截图：