Contoh kotak prompt di sudut kanan bawah halaman web JS

Artikel ini menjelaskan metode implementasi kotak prompt di sudut kanan bawah halaman web JS, dan dibagikan kepada Anda untuk referensi Anda. Metode spesifiknya adalah sebagai berikut:

Bagian kode HTML adalah sebagai berikut:

Salin kode sebagai berikut: <style type = "text/css">

.messagetip {border-right: #455690 1px solid; Border-Top: #A6B4CF 1px Solid; Border-left: #A6B4CF 1PX SOLID; Border-Bottom: #455690 1px padat; z-index: 99999; Kiri: 0px; Atas: 0px; Visibilitas: Tersembunyi; Lebar: 230px; Posisi: Absolute; Latar Belakang:#CFDEF4; Teks-Align: Kiri}

.messagetip .close {position: absolute; Kanan: 0px; font-weight: tebal; padding: 4px 4px 0 0;}

.messagetip .close a {color: red; font-size: 12px; Dekorasi Teks: Tidak Ada;}

.messagetip .content {border-top: #ffffff 1px solid; Border-left: #FFFFFFF 1PX SOLID}

.messagetip .content .title {color: #1f336b; Padding-top: 4px; Padding-left: 4px; Tinggi: 22px;}

.messagetip .content .msg {border-right: #b9c9ef 1px solid; border-left: #728eb8 1px solid; Border-top: #728eb8 1px padat; padding: 10px; margin: 1px}

</tyle>

<type skrip = "Text/JavaScript" src = "/js/base.js"> </script>

<Div id = "emeng">

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

<div>

<div> Sistem Prompt: </div>

<div>

isi

</div>

</div>

</div>

Bagian kode JS adalah sebagai berikut:

Salin kode sebagai berikut: function messagetip (pjso) {

_.init (ini, pjso, {

Nama: 'MSG' // ID Tag Kotak Prompt

});

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

}

messagetip.prototype =

{

// kotak prompt selalu di sudut kanan bawah

Reposisi: function (_tic) {

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

},

// kotak prompt perlahan -lahan naik

MovingV: function (_pis) {

/*

Di sini Anda dapat mengaturnya untuk mati setelah beberapa detik

...

*/

mencoba {

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

}

},

// tutup kotak prompt

tutup: function () {

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

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

},

// tunjukkan kotak prompt

Tampilkan: 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 _pis = ini;

this.objtimer = window.setInterval (function () {_this.movediv (_this);}, 10);

}

}

var msgtip = messagetip baru ({name: 'emeng'});

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

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

Saya harap artikel ini akan membantu pemrograman web semua orang.