Js で独自の AlertBox (情報プロンプトボックス) をカスタマイズ

Js で独自の AlertBox (情報プロンプトボックス) をカスタマイズ_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 18:56:33

オリジナル

1199 人が閲覧しました

この記事では、ユーザー定義の AlertBox を作成します。その効果は次のとおりです。

次のコードを js ファイルに挿入します。

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

// JScript ファイル 
// アラートのタイトルとボタンのテキストを定義する定数 
var。 ALERT_TITLE = "おっと!"; 
var ALERT_BUTTON_TEXT = "Close"; 
// 新しいブラウザの場合にのみアラート メソッドをオーバーライドします。
// 古いブラウザでは標準のアラートが表示されます。 (document.getElementById) { 
window.alert = function(txt) { 
createCustomAlert(txt); 
} 
} 
function createCustomAlert(txt) { 
// ショートカット リファレンスドキュメント オブジェクトに 
d = document; 
// modalContainer オブジェクトが DOM にすでに存在する場合、
if(d.getElementById("modalContainer")) return; modalContainer div を BODY 要素の子として作成します 
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); ; 
// ページ上のすべてのコンテンツをオーバーレイするのに必要な高さを確認してください 
mObj.style.height = document.documentElement.scrollHeight "px" 
// DIV を作成しますこれはアラートになります 
alertObj = mObj.appendChild(d.createElement("div")); 
alertObj.id = "alertBox"; 
// MSIE はposition:fixed を正しく処理しません。これにより、アラート 
 if(d.all && !window.opera) alterObj.style.top = document.documentElement.scrollTop "px"; 
// アラート ボックス 
alertObj の位置が補正されます。 style.left = (d.documentElement.scrollWidth -alertObj.offsetWidth)/2 "px"; 
// タイトル バーとして H1 要素を作成します 
h1 = alterObj.appendChild(d.createElement("h1") )); 
h1.appendChild( d.createTextNode(ALERT_TITLE)); 
// txt 引数を含む段落要素を作成します 
msg =alertObj.appendChild(d.createElement("p")) ; 
msg.innerHTML = txt; 
// 確認ボタンとして使用するアンカー要素を作成します。 id = "closeBtn"; 
btn .appendChild(d.createTextNode(ALERT_BUTTON_TEXT)); 
btn.href = "#">// アンカーがオンになったときにアラートを削除するように設定します。 clicked 
btn.onclick = function( ) {removeCustomAlert();return false; } 
// DOM 関数からカスタム アラートを削除しますremoveCustomAlert() { 
// document.getElementsByTagName("body") [0].removeChild(document.getElementById( "modalContainer")); 
} 
// DOM からカスタム アラートを削除します 
function RemoveCustomAlert() 
{ 
document.getElementsByTagName( "body")[0].removeChild( document.getElementById("modalContainer")); 
} 



次のコードを HTML の HEAD セクションに貼り付けます。 
 