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

This article describes the implementation method of the prompt box in the lower right corner of the js web page, and is shared with you for your reference. The specific methods are as follows:

The html code part is as follows:

Copy the code 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">

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

<div>

<div>System prompt: </div>

<div>

content

</div>

</div>

</div>

The js code part is as follows:

Copy the code as follows: function messageTip(pJso) {

_.init(this, pJso, {

name: 'msg'//prompt box tag 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 it 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);

},

//Show the prompt box

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

I hope this article will be helpful to everyone's web programming.