Example of prompt box in the lower right corner of js web page_javascript skills

The example in this article describes the implementation method of the prompt box in the lower right corner of the js web page, and shares it with everyone for your reference. The specific method is as follows:

The html code part is as follows:

Copy code The code is as follows:

×

           

System prompt:

          

Content
                                                                                       

The js code part is as follows:

Copy code The 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 lower 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 automatically close 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 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 design.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn