Ejemplo de cuadro de inmediato en la esquina inferior derecha de la página web de JS

Este artículo describe el método de implementación del cuadro de solicitud en la esquina inferior derecha de la página web JS, y se comparte con usted para su referencia. Los métodos específicos son los siguientes:

La parte del código HTML es la siguiente:

Copie el código de la siguiente manera: <style type = "text/css">

.messagetip {border-right: #455690 1px sólido; Border-Top: #A6B4CF 1PX Solid; Border-izquierda: #A6B4CF 1PX SOLID; Border-Bottom: #455690 1px sólido; Index Z: 99999; Izquierda: 0px; arriba: 0px; Visibilidad: oculto; Ancho: 230px; Posición: Absoluto; Antecedentes:#CFDEF4; Text-Align: Left}

.messagetip .close {posición: absoluto; Derecha: 0px; Font-Weight: Bold; relleno: 4px 4px 0 0;}

.messagetip .clar a {color: rojo; font-tamaño: 12px; Decoración de texto: Ninguno;}

.messagetip .content {border-top: #ffffff 1px sólido; Border-izquierda: #FFFFFF 1PX SOLID}

.messagetip .content .title {color: #1f336b; Top de relleno: 4px; RODING-LAFE: 4PX; Altura: 22px;}

.messagetip .content .msg {border-right: #b9c9ef 1px sólido; borde-izquierda: #728eb8 1px sólido; Border-Top: #728eb8 1px Solid; relleno: 10px; Margen: 1px}

</style>

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

<div id = "Emeng">

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

<div>

<div> solicitante del sistema: </div>

<div>

contenido

</div>

</div>

</div>

La parte del código JS es la siguiente:

Copie el código de la siguiente manera: función MessageTip (PJSO) {

_.init (this, pjso, {

Nombre: 'msg' // ID de etiqueta de cuadro de solicitud

});

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

}

Messagetip.prototype =

{

// El cuadro de inmediato siempre está en la esquina inferior derecha

reposicionar: 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);

},

// El cuadro de inmediato se eleva lentamente

moveiv: function (_this) {

/*

Aquí puedes configurarlo para apagar después de unos segundos

...

*/

intentar {

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

}

},

// Cierre el cuadro de inmediato

Close: function () {

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

if (this.objtimer) Window.ClearInterval (this.objtimer);

},

// Mostrar el cuadro de inmediato

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

Espero que este artículo sea útil para la programación web de todos.