Exemple de boîte d'invite dans le coin inférieur droit de la page Web JS

Cet article décrit la méthode d'implémentation de la zone d'invite dans le coin inférieur droit de la page Web JS et est partagé avec vous pour votre référence. Les méthodes spécifiques sont les suivantes:

La pièce de code HTML est la suivante:

Copiez le code comme suit: <style type = "text / css">

.MessageTip {Border-droite: # 455690 1PX solide; Border-Top: # A6B4CF 1PX solide; Border-Left: # A6B4CF 1px solide; Border-Bottom: # 455690 Solide 1px; Z-Index: 99999; gauche: 0px; En haut: 0px; Visibilité: cachée; Largeur: 230px; Position: absolue; Contexte: # CFDEF4; Texte-aligne: gauche}

.MessagePip .Close {position: absolu; Droite: 0px; Police-poids: Bold; rembourrage: 4px 4px 0 0;}

.MessagePip .Close a {Color: Red; Font-Size: 12px; text-decoration: aucun;}

.MessagePip .Content {border-top: #ffffff 1px solide; Border-Left: #ffffff 1px solide}

.MessagePip .Content .Title {Color: # 1f336b; Tableau de rembourrage: 4px; padding-gauche: 4px; hauteur: 22px;}

.MessagePip .Content .msg {Border-Right: # B9C9EF 1PX solide; Border-Left: # 728EB8 1PX solide; Border-top: # 728EB8 1PX solide; rembourrage: 10px; marge: 1px}

</ style>

<script type = "text / javascript" src = "/ js / base.js"> </ script>

<div id = "emeng">

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

<div>

<div> Invite du système: </div>

<div>

contenu

</div>

</div>

</div>

La pièce de code JS est la suivante:

Copiez le code comme suit: fonction messagetip (pjso) {

_.init (ceci, pjso, {

Nom: «MSG» // ID de balise de boîte d'invite

});

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

}

Messagetip.prototype =

{

// La boîte d'invite est toujours dans le coin inférieur droit

Reposition: fonction (_This) {

var divheight = parseInt (_This.emsg.offsetheight, 10);

var divWidth = paSeInt (_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 + paSeInt (document.body.scrollleft, 10);

},

// La boîte rapide augmente lentement

mobile: fonction (_This) {

/ *

Ici, vous pouvez le régler pour désactiver après quelques secondes

...

* /

essayer {

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

}

},

// Fermez la boîte d'invite

Close: function () {

this.emsg.style.visibilité = 'Hidden';

if (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 = paSeInt (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.visibilité = "visible";

var _this = this;

this.objtimer = window.setinterval (function () {_This.Movev (_This);}, 10);

}

}

var msgtip = new MessagePip ({name: 'emeng'});

window.onload = function () {msgtip.show (); };

window.onresize = function () {msgtip.Reposition (msgtip); };

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