js网页右下角提示框实例

<style type="text/css">

　　.messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left: #a6b4cf 1px solid; border-bottom: #455690 1px solid; z-index:99999; left: 0px; top: 0px; visibility:hidden; width: 230px; position: absolute; background:#cfdef4; text-align:left}

　　.messageTip .close{position:absolute; right:0px; font-weight:bold; padding:4px 4px 0 0;}

　　.messageTip .close a{color:red;font-size:12px; text-decoration:none;}

　　.messageTip .content{border-top: #ffffff 1px solid; border-left: #ffffff 1px solid}

　　.messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; height:22px;}

　　.messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; padding:10px; margin:1px}

　　</style>

　　<script type="text/javascript" src="/js/base.js"></script>

　　<div id="eMeng" class="messageTip">

　　<div class="close"><a href="javascript:msgTip.close();" title="关闭">×</a></div>

　　<div class="content">

　　<div class="title">系统提示：</div>

　　<div class="msg">

　　内容

　　</div>

　　</div>

　　</div>

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