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

2015/03/09 42410

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。

直接贴代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>