js模仿qq消息弹窗代码 网页右下角弹出窗口代码

发布时间:2020-06-30编辑:脚本学堂
分享一个js模仿qq消息的弹窗代码,网页右下角弹出窗口代码,感兴趣的朋友参考下。

用js脚本实现弹出窗口,js模拟qq消息一样的弹出窗口代码。(右下角提示框

完整代码:
 

复制代码 代码示例:
<title>javascript实现网页右下角弹出窗口代码_www.jb200.com</title>
<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>