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>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>
热门搜索

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