Exemple de boîte d'invite dans le coin inférieur droit des compétences page Web js_javascript

L'exemple de cet article décrit la méthode d'implémentation de la boîte d'invite dans le coin inférieur droit de la page Web js et la partage avec tout le monde pour votre référence. La méthode spécifique est la suivante :

La partie code html est la suivante :

Copier le code Le code est le suivant :

×

           

Invite système :

          

Contenu
                                                                                   

La partie code js est la suivante :

Copier le code Le code est le suivant :

fonction messageTip(pJso) {
_.init(this, pJso, {
            nom : 'msg'//ID de l'étiquette de la zone d'invite
});
This.eMsg = document.getElementById(this.name);
>

messageTip.prototype =
{
//La boîte de dialogue est toujours dans le coin inférieur droit
rePosition : fonction (_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);
},

//La boîte de dialogue monte lentement
MoveDiv : fonction (_this) {
         /*
​​​​Ici, vous pouvez le configurer pour qu'il se ferme automatiquement après quelques secondes
...
*/
         essayez {
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;
>
         attraper(e) {
>
},
 
//Fermez la boîte de dialogue
Fermer : function() {
This.eMsg.style.visibility = 'caché';
Si (this.objTimer) window.clearInterval(this.objTimer);
},

//Afficher la boîte d'invite
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 = ceci;
This.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);
>
>

var msgTip = new messageTip({ nom : 'eMeng' });
window.onload = function() { msgTip.show();
window.onresize = function() { msgTip.rePosition(msgTip };

J'espère que cet article sera utile à la conception de la programmation Web de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn