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

2015/03/09 41110
在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用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>
代码片段
