この記事では、JS Webページの右下隅にあるプロンプトボックスの実装方法について説明し、参照のために共有されています。特定の方法は次のとおりです。
HTMLコードパーツは次のとおりです。
次のようにコードをコピーします。<style type = "text/css">
.messagetip {border-right：＃455690 1px solid;ボーダートップ：＃a6b4cf 1px solid;国境左：＃a6b4cf 1px solid;国境圏：＃455690 1pxソリッド; Z-Index：99999;左：0px;上：0px;可視性：隠された;幅：230px;位置：絶対;背景：＃cfdef4;テキストアライグ：左}
.messagetip .close {position：absolute;右：0px; font-weight：bold;パディング：4px 4px 0;}
.messagetip .close a {color：red; font-size：12px;テキストデカレーション：なし;}
.messagetip .content {border-top：#ffffff 1px solid;国境左：#ffffff 1px solid}
.messagetip .content .title {color：＃1f336b;パディングトップ：4px;パディング左：4px;高さ：22px;}
.messagetip .content .msg {border-right：＃b9c9ef 1px solid; border-left：＃728eb8 1px solid;ボーダートップ：＃728EB8 1PXソリッド;パディング：10px;マージン：1px}
</style>
<script type = "text/javascript" src = "/js/base.js"> </script>
<div id = "emeng">
<div> <a href = "javascript：msgtip.close（）;">×</a> </div>
<div>
<div>システムプロンプト：</div>
<div>
コンテンツ
</div>
</div>
</div>
JSコードパーツは次のとおりです。
次のようにコードをコピーします：function messagetip（pjso）{
_.init（this、pjso、{
名前：「MSG」//プロンプトボックスタグID
}）;
this.emsg = document.getElementById（this.name）;
}
messagetip.prototype =
{
//プロンプトボックスは常に右下隅にあります
再配置：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;
_is.emsg.style.top = docheight -divheight + parseint（document.body.scrolltop、10）;
_this.emsg.style.left = docwidth -divwidth + parseint（document.body.scrollleft、10）;
}、
//プロンプトボックスがゆっくりと上昇します
moveviv：function（_this）{
/*
ここでは、数秒後にオフにするように設定できます
...
*/
試す {
if（parseint（_this.emsg.style.top、10）<=（_this.docheight -_this.divheight + parseint（document.body.scrolltop、10）））{
window.clearinterval（_this.objtimer）;
_tis.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）{
}
}、
//プロンプトボックスを閉じます
close：function（）{
this.emsg.style.visibility = 'hidden';
if（this.objtimer）window.clearinterval（this.objtimer）;
}、
//プロンプトボックスを表示します
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） + docheight + 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）; };
この記事がすべての人のWebプログラミングに役立つことを願っています。