qq消息弹窗java_js实现仿qq消息的弹出窗效果

在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗，分享给大家供大家参考，具体内容如下

运行效果截图：

直接贴代码：

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();

希望本文所述对大家学习javascript程序设计有所帮助。