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

在我們的日常開發中，或者生活中，經常需要用到彈出窗。這裡我們就用js類比一下qq訊息一樣的彈出窗。

直接貼代碼：

javaScript實現網頁右下角快顯視窗代碼<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(){//彈窗divvar _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;';//訊息標題divvar _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);//關閉訊息按鈕spanvar _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); //內容divvar _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>

一下為執行個體的：

下載原始碼：http://download.csdn.net/download/xmt1139057136/7156929

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