Exemplo de caixa imediata no canto inferior direito da página da web js

Este artigo descreve o método de implementação da caixa prompt no canto inferior direito da página da Web JS e é compartilhado com você para sua referência. Os métodos específicos são os seguintes:

A parte do código HTML é a seguinte:

Copie o código da seguinte forma: <style type = "text/css">

.MessageTip {Border-Right: #455690 1px Solid; Top de borda: #a6b4cf 1px sólido; Border-left: #a6b4cf 1px sólido; fundo de borda: #455690 1px sólido; Z-Index: 99999; Esquerda: 0px; Top: 0px; Visibilidade: escondida; Largura: 230px; Posição: Absoluto; Antecedentes:#cfdef4; Alinhamento de texto: esquerda}

.MessageTip .Close {Posição: Absolute; Direita: 0px; Peso da fonte: negrito; preenchimento: 4px 4px 0 0;}

.MessageTip .Close A {Color: Red; Fonte-Size: 12px; Decoração de texto: Nenhum;}

.MessageTip .Content {Border-top: #ffffff 1px Solid; Border-left: #ffffff 1px sólido}

.MessageTip .Content .Title {Color: #1F336B; Top-top: 4px; preenchimento-esquerda: 4px; Altura: 22px;}

.MessageTip .Content .MSG {Right-Right: #B9C9EF 1PX Solid; Border-Left: #728EB8 1px Solid; Top de borda: #728EB8 1PX SOLID; preenchimento: 10px; Margem: 1px}

</style>

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

<div id = "emeng">

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

<div>

<div> Prompt de sistema: </div>

<div>

contente

</div>

</div>

</div>

A parte do código JS é a seguinte:

Copie o código da seguinte forma: function messageTip (PJSO) {

_.init (isto, pjso, {

Nome: 'msg' // ID da tag de prontidade

});

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

}

messageTip.prototype =

{

// a caixa de prompt está sempre no canto inferior direito

Reposicionamento: função (_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);

},

// a caixa imediata aumenta lentamente

MOVEDIV: function (_This) {

/*

Aqui você pode defini -lo para desligar depois de alguns segundos

...

*/

tentar {

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

}

},

// Feche a caixa de promotos

Close: function () {

this.emsg.style.visibility = 'Hidden';

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

},

// Mostrar a caixa imediata

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.dochoight = 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 = "visível";

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

Espero que este artigo seja útil para a programação da Web de todos.