JS封裝的模仿qq右下角消息彈窗功能示例

2019-11-19 13:11:16

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>m.survivalescaperooms.com 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>

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun，測試可得到如下運行效果：