Example of prompt box in the lower right corner of js page

The example of this article about js web page right corner prompt box method, share for your reference. Specific methods are as follows:

The HTML code is as follows:

<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=" Shut down "> x </a></div>

    <div class="content">

        <div class="title"> System prompt: </div>

        <div class="msg">

         content 

        </div>

    </div>

</div>

The js code is as follows:

function messageTip(pJso) {

    _.init(this, pJso, {

        name: 'msg'//Prompt box label ID

    });

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

}
messageTip.prototype =

{

    //The prompt box is always in the bottom right corner 

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

    },
    //The prompt box slowly rises 

    moveDiv: function(_this) {

        /*

         Here you can set the auto to turn off after a few seconds 

        ...

        */

        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 the prompt box 

    close: function() {

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

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

    },
    //The prompt box 
 appears
    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); };