我们的日常开发中,或者生活中,经常需要用到弹出窗。这里我们就用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>  

一下为实例的截图:



转自:http://blog.csdn.net/xmtblog/article/details/22999351

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

JavaScript 模仿Java的Map集合,实现功能详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。