纯JS实现QQ右下角弹窗demo

废话不多说,直接贴代码,复制可直接运行:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<title>类似QQ弹窗demotitle>
head>
<body>
    <script type="text/javascript">  
    var ShowMsg={  
        title:'弹窗 标题',  
        content:'弹窗内容',  
        width:'300px',  
        height:'120px',  
        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>

【转自】http://www.open-open.com/code/view/1433385474744

你可能感兴趣的:(纯JS实现QQ右下角弹窗demo)