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

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用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程序设计有所帮助。