js网页右下角提示框实例

本文实例讲述了js网页右下角提示框的实现方法，分享给大家供大家参考。具体方法如下：

html代码部分如下：

代码如下:<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>

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) {
        /*
        这里可以设置自动几秒后关闭