この記事では、ユーザー定義の AlertBox を作成します。その効果は次のとおりです。
次のコードを js ファイルに挿入します。
// 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 セクションに貼り付けます。
コードをコピー 
