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.