js实现仿qq消息的弹出窗效果

2019-11-20 10:51:07

字体：大中小

来源：转载

供稿：网友

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗，分享给大家供大家参考，具体内容如下
运行效果截图：

直接贴代码：

<html> <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>

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：JavaScript iframe数据共享接口实现方法

下一篇：2016年最热门的15 款代码语法高亮工具，美化你的代码