html右下角弹出提醒页面,js网页右下角提示框实例

function messageTip(pJso) {

_.init(this, pJso, {

name: 'msg'//提示框标签ID

});

this.eMsg = document.getElementById(this.name);

}

messageTip.prototype =

{

//提示框始终在最右下角

rePosition: function(_this) {

var divHeight = parseInt(_this.eMsg.offsetHeight, 10);

var divWidth = parseInt(_this.eMsg.offsetWidth, 10);

var docWidth = document.body.clientWidth;

var docHeight = document.body.clientHeight;

_this.eMsg.style.top = docHeight - divHeight + parseInt(document.body.scrollTop, 10);

_this.eMsg.style.left = docWidth - divWidth + parseInt(document.body.scrollLeft, 10);

},

//提示框慢慢往上升

moveDiv: function(_this) {

/*

这里可以设置自动几秒后关闭

...

*/

try {

if (parseInt(_this.eMsg.style.top, 10) <= (_this.docHeight - _this.divHeight + parseInt(document.body.scrollTop, 10))) {

window.clearInterval(_this.objTimer);

_this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1);

}

_this.divTop = parseInt(_this.eMsg.style.top, 10);

_this.eMsg.style.top = _this.divTop - 1;

}

catch (e) {

}

},

//关闭提示框

close: function() {

this.eMsg.style.visibility = 'hidden';

if (this.objTimer) window.clearInterval(this.objTimer);

},

//显示提示框

show: function() {

var divTop = parseInt(this.eMsg.style.top, 10);

this.divTop = divTop;

var divLeft = parseInt(this.eMsg.style.left, 10);

var divHeight = parseInt(this.eMsg.offsetHeight, 10);

this.divHeight = divHeight;

var divWidth = parseInt(this.eMsg.offsetWidth, 10);

var docWidth = document.body.clientWidth;

var docHeight = document.body.clientHeight;

this.docHeight = docHeight;

this.eMsg.style.top = parseInt(document.body.scrollTop, 10) + docHeight + 10;

this.eMsg.style.left = parseInt(document.body.scrollLeft, 10) + docWidth - divWidth;

this.eMsg.style.visibility = "visible";

var _this = this;

this.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);

}

}

var msgTip = new messageTip({ name: 'eMeng' });

window.onload = function() { msgTip.show(); };

window.onresize = function() { msgTip.rePosition(msgTip); };