↓　このフォームには、上記のリストと同じものが入っています。[CTRL]+[A]で全選択して、コピーできます。

// いったん上端に移動する
	myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight;
	document.getElementById("idAlert").style.top = myY/2*(-1);

// 中央に移動する
	myXs = document.body.scrollLeft;	
	myYs = document.body.scrollTop;
	myX = (window.innerWidth !== undefined) ? window.innerWidth : document.body.clientWidth;
	myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight;
	document.getElementById("idAlert").style.left = myX / 2 - (myX/2/2) + myXs;
	document.getElementById("idAlert").style.top = myY / 2 - (myY/2/2) + myYs;

// 警告画面を表示
	document.getElementById("idAlert").style.visibility = "visible";

// フェードイン
	document.getElementById("idAlert").className = "fadein";
}
function myAlertClose(){
	// 上端に移動する
	myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight;
	document.getElementById("idAlert").style.top = myY/2*(-1);

// フェードアウト
	document.getElementById("idAlert").className = "fadeout";

// 警告画面を隠す
	document.getElementById("idAlert").style.visibility = "hidden";
}
// --></script>
<div id="idAlert" class="fadeout" style="background-color:#FFFFFF; visibility:hidden; position:absolute; border-width:thick; border-style:ridge; width:50%; box-shadow:10px 10px 10px rgba(0,0,0,0.5); border-radius:10px;">
	<div style="float:right"><div onclick="myAlertClose()"><img src="close03-001.png"></div></div>
	<div id="idAlertTitle" style="background-color:#C0C0C0; text-align:center; padding:10px 0px; border-radius:5px 5px 0px 0px;"></div>
	<div style="margin:20px 20px 0px 0px;">
		<div style="display:table; float:left; width:100px; height:100px;"><p style="display:table-cell;vertical-align:middle;text-align:center;"><img   src="alert01-004-48.png"></p></div>
		<div style="display:table; height:100px;"><div id="idAlertMessage" style="display:table-cell;vertical-align:middle;"></div></div>
	</div>
	<div style="padding:10px 0px; text-align:center;">
	<input style="border-radius:5px; font-size:large; width:100px;" type="button" value="O K" onclick="myAlertClose()">
	</div>
</div>

説明

ブラウザ標準の警告画面が地味なので、自作アラート画面を表示する myAlert() 関数を作ってみました。

第1パラメータにタイトル
第2パラメータにメッセージ
を渡して myAlert() を呼べば、警告画面が表示されます。

例: myAlert( "警告", "それは、だめでしょ" );

第2パラメータのメッセージで改行したければ、\n も対応しました。
しかし、innerHTML に叩き込むだけなので、<BR> でも構いません。
プログラムも単純に \n を <BR> に置き換えているだけです。

myMessage = myMessage.replace(/\n/g, "<BR>");

※ replace は、Step.101参照

例: myAlert( "警告", "それは、だめでしょ\n\nだめよ、だめだめ" );

●myAlert()の説明

パラメータで受け取ったタイトルとメッセージを innerHTMLで叩き込みます。

// タイトルとメッセージをセットする

document.getElementById("idAlertTitle").innerHTML = myTitle;

document.getElementById("idAlertMessage").innerHTML = myMessage;

※ innerHTMLは、Step.44参照

今回、警告画面を表示するのに、フェードイン/フェードアウト効果と、上から警告画面が現れる仕掛けを入れました。

いったん、警告画面の座標を上端に移動させます。

// いったん上端に移動する

myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight;

document.getElementById("idAlert").style.top = myY/2*(-1); // (適当な計算)

警告画面を中央に表示するために座標を計算して、位置を移動させます。

// 中央に移動する

myXs = document.body.scrollLeft;

myYs = document.body.scrollTop;

myX = (window.innerWidth !== undefined) ? window.innerWidth : document.body.clientWidth;

myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight;

document.getElementById("idAlert").style.left = myX / 2 - (myX/2/2) + myXs;

document.getElementById("idAlert").style.top = myY / 2 - (myY/2/2) + myYs; // (適当な計算)

※ 座標の取得・計算は、Step.39、Step.74、Step.93を参照

このサンプルの警告画面は、縦横の長さは可変で作っています。
横幅は、ブラウザ画面幅の半分のサイズ(width:50%)で表示するようにしています。
縦幅は、メッセージの行数で伸縮します。
myX / 2 で画面の横中央の座標を求めて、(myX/2/2) は、警告画面幅を width:50%にしているので、myX/2 で警告画面幅を求めて、さらにその半分で、表示すべき X座標を割り出しています。
しかし、Y座標は長さ指定をしていないので取得できません。適当に (myY/2/2) くらい引いています。(汗
固定長BOXで作るのであれば、(myX/2/2) と (myY/2/2) を (width/2)、(height/2) に変更します。

非表示にしていた警告画面を表示して、

// 警告画面を表示

document.getElementById("idAlert").style.visibility = "visible";

透過にしていた警告画面を非透過にして表示します。

// フェードイン

document.getElementById("idAlert").className = "fadein";

class名:fadeout を class名:fadein に変更することで、フェードイン効果と上から警告画面が現れる仕掛けが発動します。
移動のスピードを調整する場合は、AlertFadein、AlertFadeout内の秒を変更してください。例: 0.5s → 1s

※ フェードイン/アウト効果やクラス名の変更は、Step.100を参照

[OK]ボタン／[X]ボタンが押されたときに呼ばれる myAlertClose() 関数では、
警告画面を上端に移動させて、

// 上端に移動する

myY = (window.innerHeight !== undefined) ? window.innerHeight : document.body.clientHeight;

document.getElementById("idAlert").style.top = myY/2*(-1); // (適当な計算)

警告画面を透過にします。

// フェードアウト

document.getElementById("idAlert").className = "fadeout";

class名:fadein を class名:fadeout に変更することで、フェードアウト効果と下端へ警告画面が移動する仕掛けが発動します。

最後に警告画面を隠します。

// 警告画面を隠す

document.getElementById("idAlert").style.visibility = "hidden";

●タグの説明

警告画面の外枠です。表示／非表示を行うための ID:idAlert を振っています。フェードイン効果のための CLASS:fadeout を指定します。

background-color:#FFFFFF	背景全体を白
visibility:hidden	非表示
position:absolute	絶対位置
border-width:thick	枠線の幅
border-style:ridge	枠線を立体的(隆起)に
width:50%	横幅を画面の半分の大きさに
box-shadow:10px 10px 10px rgba(0,0,0,0.5)	影をつけてみる
border-radius:10px	角を丸く

タイトルと[X]ボタンを表示します。タイトルを入れ込むために ID:idAlertTitle を振っています。[X]ボタンを押すと、myAlertClose() を呼んで警告画面を閉じます。

float:right	[X]ボタンの左側にタイトルを回り込ませる
background-color:#C0C0C0	タイトルの背景色(灰色)
text-align:center	タイトルをセンタリング
padding:10px 0px	タイトル上下の余白
border-radius:5px 5px 0px 0px	上端を気持ち丸っこくする

メッセージ枠の上と右に余白を入れたかっただけです。

margin:20px 20px 0px 0px	メッセージ枠の上と右に余白

アイコンの表示です。

display:table display:table-cell vertical-align:middle text-align:center	アイコンを中央に表示
float:left	右側にメッセージを回り込ませる
width:100px	アイコン枠の横幅指定
height:100px	アイコン枠の縦幅指定

メッセージの表示です。メッセージを入れ込むために ID:idAlertMessage を振っています。

display:table display:table-cell vertical-align:middle	メッセージを縦中央に表示

</div>

[OK]ボタンの表示です。[OK]ボタンを押すと、myAlertClose() を呼んで警告画面を閉じます。

padding:10px 0px	上下に余白
text-align:center	ボタンをセンタリング
border-radius:5px	ボタンの角を丸く
font-size:large	字をでかく
width:100px	ボタンの幅

● 参考ステップ

Step.14 九九の問題に答えてみましょう　alert
Step.39 「只今ホームページ読込中！」メッセージを表示してみましょう　座標関係
Step.74 画面右下にリンクバナーを固定表示してみましょう　座標関係
Step.93 画像をビリヤード風に動かして見ましょう　座標関係
Step.101 ツリーメニューを表示してみましょう　replace
Step.44 日付と時間をリアルタイムに表示してみましょう　document.getElementById().innerHTML
Step.45 文字色をリアルタイムに変更してみましょう　document.getElementById().style
Step.100 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょうその3　フェードイン/フェードアウト効果

● リファレンス

※ 使用してるアイコンは、無料素材倶楽部さんから拝借。

▲TOP

実行例

リスト

説明

Q&A 1

Q&A 2