閱讀359 返回首頁    go 阿裏雲 go 技術社區[雲棲]

js封裝好的模仿qq消息彈窗代碼

在我們的日常開發中，或者生活中，經常需要用到彈出窗。這裏我們就用js模擬一下qq消息一樣的彈出窗。

直接貼代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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.;  
			_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.;   
			_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.; 
			_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.;  
			_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>
一下為實例的截圖：

點擊下載源代碼：https://download.csdn.net/download/xmt1139057136/7156929

歡迎大家關注我的個人博客，或者加qq群135430763共同學習！

最後更新：2017-04-03 12:56:36

  上一篇：go ssh、selinux、防火牆等啟動與停止命令
  下一篇：go mian函數參數用法