焼きたての JS ヒント プロンプト効果_JavaScript スキル

互換性はテストされています: IE6IE7IE8FF3CHROME10

コードをコピー コードは次のとおりです:

=" http://www.w3.org/1999/xhtml">










id= 'テスト'>







通常のリンクまたはボタン プロンプト

<script> <br>//プロンプト メッセージ クラス<BR>vartips = { <BR>temp : {}, <BR>/*** <BR>* ポップアップ プロンプト<BR>* <BR>* @param string msg プロンプト テキストの内容<BR>* @param string id プロンプトをポップアップするターゲット オブジェクトの ID ID が間違っている場合/ null/false/0、メイン ウィンドウ ポップアップ<BR>* @param int time スケジュールされた消失時間 (ミリ秒)。null/0/false の場合、スケジュールされません。<BR>* @param string colorプロンプト コンテンツの背景色の形式は #000000 <BR>* @param int width プロンプト ウィンドウの幅、デフォルトは 300 <BR>*/ <BR>show : function(msg, id, time, color, width) <BR>{ <BR>var target = this._get(id ); <BR>if(!target) { id = 'window'; } <BR><br>// ポップアップした場合は、削除して再度ポップアップします<br>if(this._get(id ' _tips')) { this.remove (id); } <BR><br>// デフォルト値を設定します <br>msg = msg || '#ea0000'; <BR>幅 = 幅 || ; <BR>時間 = 時間 ? parseInt(time) : false; <BR><BR>if(id=='window') { <br>var y = document.body. clientHeight/2 document.body.scrollTop; <br>var x = (document.body.clientWidth-width)/2; <BR>var textAlign = 'center'、fontSize = '15'、fontWeight = 'bold'; 🎜>} else { <BR>/ /オブジェクト座標情報を取得<BR>for(var y=0,x=0; target!=null; y =target.offsetTop, x =target.offsetLeft, target=target.offsetParent ); <BR>var textAlign = 'left', fontSize = '12',fontWeight = 'normal'; <BR><BR>//ポップアッププロンプト<BR>vartipsDiv = this._create( {display:'block',position:'absolute',zIndex:'1001',width:(width-2) 'px',left:(x 1) 'px',padding:'5px',color:'# ffffff',fontSize:fontSize 'px',backgroundColor :color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id '_text', innerHTML: msg, onclick:function(){tips.hidden (id);}}); <BR>document.body.appendChild(tipsDiv); <br>tipsDiv.style.top = (y-tipsDiv.offsetHeight-12) ' px'; <br>document.body.appendChild (this._create({display:'block',position:'absolute',zIndex:'1000',width:(width 10) 'px',height:(tipsDiv. offsetHeight-2) 'px',left:x 'px',top:(y-tipsDiv.offsetHeight-11) 'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7' }, {id:id '_bg'}) ); <BR>if(id!='window') { <BR>var arrow = this._create({display:'block',position:'absolute',overflow :'hidden',zIndex:'999'、幅:'20px'、高さ:'10px'、左:(x 20) 'px'、上:(y-13) 'px'}、{id:id ' _arrow'}); <BR>arrow.appendChild (this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px ソリッド ' color,borderRight :'10px ソリッド #fff', borderLeft:' 10px ソリッド #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'})); <BR>document.body.appendChild(arrow); 🎜>} <BR><BR>// マークが出ました<BR>this.temp[id] = id; <BR><BR>//タイマーがオフの場合<br>if(time) { setTimeout(function(){tips.hidden(id);}, time ) } <br><BR>return id; <br>}, <br>/*** <BR>* プロンプトを非表示にする <br>* <br>* @param string id メイン ウィンドウを非表示にする場合、プロンプト ID は window です。 、ID は空でもかまいません <BR>*/ <BR>hidden : function( id) <BR>{ <BR>if(!id) { for (var i in this.temp) { this.hidden(i) } return; } <BR>var t = this._get(id '_text' )、d = this._get(id '_bg')、a = this._get(id '_arrow'); <BR>if(t) { t.parentNode.removeChild(t) } <BR>if(d) ) { d.parentNode.removeChild(d); } <BR>if (a) { a.parentNode.removeChild(a) } <BR>}, <BR>_create : function(set, attr) <BR>{ <BR>var obj = document.createElement('div'); <BR>for(var i in set) { obj.style[i] = set[i]; } <BR>for(var i in attr) { obj[i] = attr[i]; } <BR>return <BR>}, <BR>_get : function(id) <BR>{ <BR>return document.getElementById(id); <BR>}; <BR><BR><BR>window.onload = function(){ <BR>tips.show('メイン ウィンドウのヒント-緑-不規則-300 ピクセル', null, null, '#009900' , 300); <BR>tips.show('フォーム エラーのヒント - 赤 - 3000 ミリ秒で消える - 250 ピクセル', 'test', 3000, '#ea0000', 250); <BR>} <br>ドキュメント。 onclick = function(){ <br>tips.hidden() <BR>} <BR></script>