ダイアログウィンドウを表示する

・	警告用のダイアログボックスを開く
・	確認ボタン付きのダイアログボックスを開く
・	入力欄付きのダイアログボックスを開く
・	ファイル選択ダイアログボックスを開く
・	モーダルダイアログウィンドウを開く
・	エレメントを中央にポップアップ表示する

前のページに戻る

警告用のダイアログボックスを開く

■警告用のダイアログボックスを開く

window.alert() メソッドを使用します。

このメソッドは、同期実行です。

ユーザーがダイアログを閉じるまでの間、制御が返りません。

スクリプトを一時停止して変数の中身を確認できるので、デバッグ用としても重宝します。

Window.alert( "メッセージ" ) :Void

第01引数	String	ダイアログに表示したい文字列を指定。
戻り値	Void	なし

■使用例

警告用ダイアログボックスを表示する


alert( "表示テスト" );

Windows XP Internet Explorer 8

上に戻る

確認ボタン付きのダイアログボックスを開く

■確認ボタン付きのダイアログボックスを開く

window.confirm() メソッドを使用します。

このメソッドは、同期実行です。

ユーザーがダイアログを閉じるまでの間、制御が返りません。

Window.confirm( "メッセージ" ) :Boolean

第01引数	String	ダイアログに表示したい文字列を指定。
戻り値	Boolean	true の場合、「OK」ボタンが押された。false の場合、「CANCEL」ボタンが押された。

■使用例

確認ボタン付きのダイアログボックスを表示する


// ------------------------------------------------------------
// 確認ボタン付きのダイアログボックスを表示して結果を得る
// ------------------------------------------------------------
var result = confirm( "表示テスト" );

if(result){
	console.log(" OK が押された");
}else{
	console.log(" CANCEL が押された");
}

Windows XP Internet Explorer 8

上に戻る

入力欄付きのダイアログボックスを開く

■入力欄付きのダイアログボックスを開く

window.prompt() メソッドを使用します。

このメソッドは、同期実行です。

ユーザーがダイアログを閉じるまでの間、制御が返りません。

Window.prompt( "メッセージ" , "入力欄のデフォルト値" ) :Boolean

第01引数	String	ダイアログに表示したい文字列を指定。
第02引数(略可)	String	入力欄にデフォルトで表示したい文字列を指定。
戻り値	String	「OK」ボタンが押されていれば、入力欄の文字列が得られる。「CANCEL」ボタンが押されていれば null 値が得られる。一部のブラウザでは空文字が得られる。

■使用例

入力欄付きのダイアログボックスを表示する


// ------------------------------------------------------------
// 入力欄付きのダイアログボックスを表示して結果を得る
// ------------------------------------------------------------
var result = prompt( "表示テスト" , "test" );

if(result){
	console.log(" OK が押された:" + result);
}else{
	console.log(" CANCEL が押された");
}

Windows XP Internet Explorer 8

上に戻る

ファイル選択ダイアログボックスを開く

■ファイル選択ダイアログボックスを開く

<input type="file" > 要素を使用します。

ファイル選択コントロールについては、こちらで解説しています。

■ JavaScript からファイル選択ダイアログを開く

click() メソッドを使用します。

マウスやキーボードなどの押下操作中に限って、実行する事ができます。

■使用例

クリック操作時に、ファイル選択ダイアログを開く


<html>
  <body>

    <form>

      <input type="file" id="aaa" multiple > <br>
      <input type="button" id="bbb" value="ファイルを開く" style="width:200px; height:50px;" >

    </form>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var input_file = document.getElementById("aaa");
	var input_button = document.getElementById("bbb");

	// ------------------------------------------------------------
	// 値が変化した時に実行されるイベント
	// ------------------------------------------------------------
	input_file.onchange = function (e){

		// ファイルが選択されたか
		if(input_file.value){
			console.log("ファイルが選択された:" + input_file.value);
		}else{
			console.log("ファイルが未選択");
		}

		// ファイルが選択されたか
		if(!(input_file.value)) return;

		// FileList オブジェクトを取得する
		var file_list = input_file.files;
		if(!file_list) return;

		var i;
		var num = file_list.length;
		for(i=0;i < num;i++){

			// File オブジェクトを取得する
			var file = file_list[i];

			// 出力テスト
			console.log("--- id:" + i);
			console.log("name:" + file.name);
			console.log("size:" + file.size);
			console.log("type:" + file.type);
		}

	};

	// ------------------------------------------------------------
	// クリックした時に実行されるイベント
	// ------------------------------------------------------------
	input_button.onclick = function (e){

		// ファイル選択ダイアログを開く
		input_file.click();

	};

    //-->
    </script>

  </body>
</html>

Windows XP Internet Explorer 8

■フォルダ選択ダイアログボックスについて

フォルダを選択する為の UI はありません。

■ directory 属性について

Google Chrome の場合、webkitdirectory 属性を付けるとテスト的に動作します。

これは、１つのフォルダを選択できるわけではありません。

フォルダ内にあるすべてのファイルを、まとめて取得することができます。

上に戻る

モーダルダイアログウィンドウを開く

モーダルダイアログ表示中にデータをやり取りする

■モーダルダイアログウィンドウを作成する

showModalDialog() メソッドを使用します。

このメソッドは、同期実行です。

ユーザーがダイアログを閉じるまでの間、制御が返りません。

Window.showModalDialog( "URL" , ダイアログに渡すデータ , "オプション" ) :Object

第01引数	String	表示したい URL アドレスを指定。
第02引数(略可)	Object	モーダルダイアログに渡したいデータを指定。
第03引数(略可)	String	オプションを文字列で指定。
戻り値	Object	モーダルダイアログからの戻り値が得られる。

■ showModalDialog() の廃止について

showModalDialog() は、主要ブラウザで廃止済みです。

GoogleChrome は、37 で廃止済みです。

Firefox は、48 で廃止済みです。

Opera(Presto 版) では、動作しません。

■ポップアップブロックを回避する

マウスやキーボードなどの押下操作中に実行します。

■第01引数（ URL を指定）

開きたい URL アドレスを指定します。

「ダイアログ作成元の URL」と「開いた先の URL」の、生成元（オリジン）が一致している必要があります。

オリジンが一致しない場合、表示はできますが、ダイアログと連携する事はできません。

http://example.com を開く


// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定して、モーダルダイアログを開く
	window.showModalDialog( "http://example.com/" );

};

■第02引数（モーダログダイアログに渡す引数）

モーダルダイアログに渡したいデータを指定します。

ダイアログ側で受け取る方法は、こちらで解説しています。

■第03引数（オプション）

こちらで解説しています。

■ showModalDialog() のオプションについて（第03引数）

表記方法は、スタイルシートと似ています。

「名前:値」と記述します。

複数のパラメータを指定したい場合は、セミコロン ";" で区切ります。

「名前:値;名前:値;名前:値」

■ダイアログの位置やサイズに関するパラメータ

数値を指定します。単位表記（em , ex , or , px）も必要です。

名前	説明
dialogLeft	ダイアログの水平位置（スクリーン座標系）
dialogTop	ダイアログの垂直位置（スクリーン座標系）
dialogWidth	ダイアログのクライアント領域の幅
dialogHeight	ダイアログのクライアント領域の高さ

■ダイアログの表示に関するパラメータ

真偽値（yes , no , 1 , 0）を指定します。

すべてのブラウザで利用できるとは限りません。

名前	説明
center	スクリーン中央表示の有無を設定。
resizable	ダイアログのリサイズの有無を設定。
scroll	ダイアログのスクロールバーの表示の有無を設定。
status	ブラウザのステータスバーの表示の有無を設定。

■作成例

幅と高さを指定して、画面中央にモーダルダイアログを開く


// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// URL を指定して、モーダルダイアログを開く
	window.showModalDialog( "http://example.com/" , null , "dialogWidth:400px;dialogHeight:300px;center=1");

};

■モーダルダイアログ側で引数を受け取る

window.dialogArguments プロパティを使用します。

中には、showModalDialog() メソッドの第02引数で渡した値が格納されています。

■セキュリティについて

「ダイアログ作成元の URL」と「開いた先の URL」の、生成元（オリジン）が一致している必要があります。

オリジンが一致しない場合、undefined 値が格納されています。

Google Chrome の場合、ローカル環境では動作しません。

動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。

■ダイアログ生成側の例

引数パラメーターをセットしつつ、モーダルダイアログを開く（生成主）


// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// 送信用オブジェクト
	var request_obj = {aaa:123,bbb:"abc",ccc:true};

	// パラメーターをセットしつつ、モーダルダイアログを開く
	window.showModalDialog("dialog.html",request_obj);

};

■モーダルダイアログ側の例

生成主から渡された引数を受け取る（ダイアログ側）


<html>
  <body>

    <script type="text/javascript">
    <!--

	// 生成主から渡された引数を受け取る
	var request_obj = window.dialogArguments;

	// 出力テスト
	if(request_obj !== undefined){
		console.log(request_obj.aaa);
		console.log(request_obj.bbb);
		console.log(request_obj.ccc);
	}

    //-->
    </script>

  </body>
</html>

■モーダルダイアログ側から戻り値を返す

window.returnValue プロパティを使用します。

このプロパティに、好きなデータを格納します。

生成主は、showModalDialog() メソッドの戻り値から、データを受け取ることができます。

■セキュリティについて

「ダイアログ作成元の URL」と「開いた先の URL」の、生成元（オリジン）が一致している必要があります。

オリジンが一致しない場合、undefined 値が返ります。

Google Chrome の場合、ローカル環境では動作しません。

動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。

■モーダルダイアログ側の例

生成主へ結果を返す（ダイアログ側）


<html>
  <body>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// ページがアンロードされた時に実行されるイベント
	// ------------------------------------------------------------
	window.onunload = function (e){

		// 返信用オブジェクト
		var receive_obj = {aaa:456,bbb:"def",ccc:false};

		// 生成主へ戻り値を返す
		window.returnValue = receive_obj;

	};

    //-->
    </script>

  </body>
</html>

■ダイアログ生成側の例

モーダルダイアログを開いて結果を取得する（生成主）


// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// モーダルダイアログを開いて、結果を受け取る
	var response_obj = window.showModalDialog("dialog.html");

	// 出力テスト
	if(response_obj !== undefined){
		console.log(response_obj.aaa);
		console.log(response_obj.bbb);
		console.log(response_obj.ccc);
	}
};

■モーダルダイアログ表示中に相互にデータをやり取りする

showModalDialog() メソッドの第02引数から、関数オブジェクトを渡すことができます。

モーダルダイアログ側から関数を実行すれば、生成主と相互にデータをやり取りする事ができます。

■セキュリティについて

「ダイアログ作成元の URL」と「開いた先の URL」の、生成元（オリジン）が一致している必要があります。

Google Chrome の場合、ローカル環境では動作しません。

動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。

■ダイアログ生成側の例

コールバック関数をセットして、モーダルダイアログを開く（生成主）


// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (){

	// ------------------------------------------------------------
	// 受信用変数
	// ------------------------------------------------------------
	var response_obj = undefined;

	// ------------------------------------------------------------
	// コールバック関数を定義する
	// ------------------------------------------------------------
	var argument_obj = {

		// ------------------------------------------------------------
		// 外部からデータを取得させる関数
		// ------------------------------------------------------------
		getData:function (){
			return {aaa:123,bbb:"abc",ccc:true};
		},

		// ------------------------------------------------------------
		// 外部からデータをセットさせる関数
		// ------------------------------------------------------------
		setData:function (receive){

			// 返信データを受け取る
			response_obj = receive;

			// 出力テスト
			console.log(response_obj.aaa);
			console.log(response_obj.bbb);
			console.log(response_obj.ccc);
		}
	};

	// ------------------------------------------------------------
	// モーダルダイアログを開く
	// ------------------------------------------------------------
	window.showModalDialog("dialog.html",argument_obj);

};

■モーダルダイアログ側の例

生成主から供給されたコールバック関数を実行して、データをやり取りする（ダイアログ側）


<html>
  <body>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// 生成主から渡された引数を受け取る
	// ------------------------------------------------------------
	var argument_obj = window.dialogArguments;
	if(argument_obj !== undefined){

		// ------------------------------------------------------------
		// コールバック関数を実行して、データを受け取る
		// ------------------------------------------------------------
		var request_obj = argument_obj.getData();

		// 出力テスト
		console.log(request_obj.aaa);
		console.log(request_obj.bbb);
		console.log(request_obj.ccc);


		// ------------------------------------------------------------
		// クリックした時に実行されるイベント
		// ------------------------------------------------------------
		window.onclick = function (e){

			// ------------------------------------------------------------
			// 返信用オブジェクト
			// ------------------------------------------------------------
			var receive_obj = {aaa:456,bbb:"def",ccc:false};

			// ------------------------------------------------------------
			// コールバック関数を実行して、データを渡す
			// ------------------------------------------------------------
			argument_obj.setData(receive_obj);

		};
	}

    //-->
    </script>

  </body>
</html>

上に戻る

エレメントを中央にポップアップ表示する

背景用エレメントを画面全体に表示する

ポップアップ用エレメントを画面中央に表示する

■背景用エレメントを画面全体に表示する

まず、透明な背景用エレメントを、画面全体に配置します。

演出の意味もありますが、通常のコンテンツのマウス操作を簡易的に無効化する事ができます。

１．背景用エレメントを作成する

エレメントを作成するには、document.createElement() メソッドを使用します。

引数に、"div" を指定します。

背景用エレメントを作成する


// 背景用エレメントを作成
var element_bg = document.createElement("div");

２．スタイルシートを設定する

エレメントにインラインスタイルを設定します。

エレメントが画面全体に表示されるように設定します。

お好みで、エレメントに透明度を設定します。

画面全体が暗くなるスタイルを設定する


// ------------------------------------------------------------
// 背景用エレメントを作成
// ------------------------------------------------------------
var element_bg = document.createElement("div");

// ------------------------------------------------------------
// CSSStyleDeclaration オブジェクトを取得
// ------------------------------------------------------------
var style = element_bg.style;

// ------------------------------------------------------------
// エレメントが画面全体に表示されるように設定
// ------------------------------------------------------------
style.position = "fixed";
style.left   = "0px";
style.right  = "0px";
style.top    = "0px";
style.bottom = "0px";

// ------------------------------------------------------------
// 背景色を設定する
// ------------------------------------------------------------
style.backgroundColor = "#000";

// ------------------------------------------------------------
// 透明度を設定する（0.0 ～ 1.0）
// ------------------------------------------------------------
var opacity = 0.5;
style.opacity = opacity;
style.filter = "alpha(opacity=" + (opacity * 100) + ")";

３．ノードリストに登録する

エレメントを、ブラウザに表示するには、任意のノードリストに登録する必要があります。

背景用エレメントをブラウザに表示する


// ------------------------------------------------------------
// 背景用エレメントを作成
// ------------------------------------------------------------
var element_bg = document.createElement("div");

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
～略～

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element_bg);

４．リサイズとスクロールを監視して、エレメントの位置とサイズを補正する

互換モードに対応する場合の例です。

リサイズイベントとスクロールイベントが発生したか監視します。

ウィンドウのスクロール位置を取得して、エレメントの位置を変更します。

クライアント領域のサイズを取得して、エレメントのサイズを変更します。

リサイズとスクロールを監視して、エレメントの位置とサイズを補正する


// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
	var b = document_obj.body;
	var r = document_obj.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(document_obj.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}

// --------------------------------------------------------------------------------
// ウィンドウのスクロール位置を取得する関数
// --------------------------------------------------------------------------------
function WindowGetScrollPosition(window_obj){
	if(window_obj.pageXOffset === undefined){
	}else if(window_obj.pageYOffset === undefined){
	}else{
		return {
			x:window_obj.pageXOffset,
			y:window_obj.pageYOffset
		};
	}

	var d = window_obj.document;
	return {
		x:(d.documentElement.scrollLeft || d.body.scrollLeft),
		y:(d.documentElement.scrollTop  || d.body.scrollTop )
	};
}


// --------------------------------------------------------------------------------
// 背景用エレメントを更新する関数
// --------------------------------------------------------------------------------
function PopupElementUpdate(){

	// ドキュメントのクライアント領域のサイズを取得する
	var client_size = DocumentGetClientSize(document);

	// ウィンドウのスクロール位置を取得する
	var scroll_pos = WindowGetScrollPosition(window);

	// CSSStyleDeclaration オブジェクトを取得
	var style = element_bg.style;

	// エレメントを位置を修正する
	style.left = (scroll_pos.x) + "px";
	style.top  = (scroll_pos.y) + "px";

	// エレメントをサイズを修正する
	style.width  = (client_size.width)  + "px";
	style.height = (client_size.height) + "px";
}

// ------------------------------------------------------------
// 背景用エレメントを作成
// ------------------------------------------------------------
var element_bg = document.createElement("div");

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
var style = element_bg.style;
style.position = "absolute";
style.backgroundColor = "#000";
var opacity = 0.5;
style.opacity = opacity;
style.filter = "alpha(opacity=" + (opacity * 100) + ")";

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element_bg);

// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// リサイズされるたびに実行されるイベント
	window.addEventListener("resize" , PopupElementUpdate);
	// スクロールされるたびに実行されるイベント
	window.addEventListener("scroll" , PopupElementUpdate);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// リサイズされるたびに実行されるイベント
	window.attachEvent("onresize" , PopupElementUpdate);
	// スクロールされるたびに実行されるイベント
	window.attachEvent("onscroll" , PopupElementUpdate);

}

// 初回更新
PopupElementUpdate();

■ポップアップ用エレメントを画面中央に表示する

次に、ポップアップ用エレメントをクライアント中央に表示します。

１．ポップアップ用エレメントを作成する

エレメントを作成するには、document.createElement() メソッドを使用します。

引数に、"div" を指定します。

ポップアップ用エレメントを作成する


// ポップアップ用エレメントを作成
var element_popup = document.createElement("div");

２．スタイルシートを設定する

エレメントにインラインスタイルを設定します。

お好みのデザインを設定します。

スタイルシートの position には、"absolute" を設定します。

エレメントの幅や高さを固定したい場合は、この時点で設定するといいでしょう。

エレメントのサイズを設定する方法は、こちらで解説しています。

エレメントにインラインスタイルを設定する


// ------------------------------------------------------------
// ポップアップ用エレメントを作成
// ------------------------------------------------------------
var element_popup = document.createElement("div");

// ------------------------------------------------------------
// CSSStyleDeclaration オブジェクトを取得
// ------------------------------------------------------------
var style = element_popup.style;

// ------------------------------------------------------------
// エレメントの配置を設定
// ------------------------------------------------------------
style.position = "absolute";

// ------------------------------------------------------------
// エレメントのサイズを設定
// ------------------------------------------------------------
style.width  = "400px";

// ------------------------------------------------------------
// その他のデザインを設定
// ------------------------------------------------------------
style.backgroundColor = "#fee";
style.border = "5px #866 solid";
style.borderRadius = "10px";
style.boxShadow = "5px 5px 10px #444";

３．ノードリストに登録する

エレメントを、ブラウザに表示するには、任意のノードリストに登録する必要があります。

ポップアップ用エレメントをブラウザに表示する


// ------------------------------------------------------------
// ポップアップ用エレメントを作成
// ------------------------------------------------------------
var element_popup = document.createElement("div");

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
～略～

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element_popup);

４．エレメント内にコンテンツを構築する

ポップアップ用エレメント内に、コンテンツを構築します。

innerHTML プロパティを使用すると簡単です。

「HTML 文字列」をセットすれば、DOM オブジェクトをまとめて構築する事ができます。

ただし、外部から得られる不特定の文字列を表示する場合、セキュリティリスクとなるので注意します。

危険な部分は除外しておいて、後からテキストノードを挿入することもできます。

また、DOM API を駆使して、地道に構築することもできます。

エレメント内にコンテンツを構築する


// ------------------------------------------------------------
// ポップアップ用エレメントを作成
// ------------------------------------------------------------
var element_popup = document.createElement("div");

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
～略～

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element_popup);

// ------------------------------------------------------------
// HTML 文字列を指定して、DOM オブジェクトをまとめて構築する
// ------------------------------------------------------------
element_popup.innerHTML = '' +
	'<div style="font-weight:bold; background:#866; color:#fff; padding:5px;">' +
	'	確認用ダイアログ' +
	'</div>' +
	'<div id="element_message" style="margin:10px; padding:20px; background:#fff; border:1px solid #888;">' +
	'</div>' +
	'<div style="margin:10px;">' +
	'	<input type="button" style="width:100%; height:50px;" value="了解">' +
	'</div>';


// ------------------------------------------------------------
// 後からテキストノードを挿入する場合
// ------------------------------------------------------------
// "element_message" という ID 属性のエレメントを取得する
var element_message = document.getElementById("element_message");

// エレメントに文字列をセットする
element_message.textContent = "テスト用メッセージです。";

５．リサイズとスクロールを監視して、エレメントの位置とサイズを補正する

リサイズイベントとスクロールイベントが発生したか監視します。

まず、クライアント領域のサイズを取得します。

得られた値によって、エレメントのサイズを変更したい場合は、この時点で設定します。

次に、エレメントのバウンディングボックスのサイズを取得します。

この時点で、エレメントを中央に配置するための座標が計算できます。（クライアント座標系）

(エレメントの x 座標) = (クライアント幅 / 2) - (エレメントの幅 / 2)

(エレメントの y 座標) = (クライアント高さ / 2) - (エレメントの高さ / 2)

最後に、ウィンドウのスクロール位置を取得します。

クライアント座標に、スクロール位置を加算すると、グローバル座標系に変換することができます。

エレメントの位置を変更する方法は、こちらで解説しています。

リサイズとスクロールを監視して、エレメントの位置とサイズを補正する


// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
	var b = document_obj.body;
	var r = document_obj.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(document_obj.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}

// --------------------------------------------------------------------------------
// ウィンドウのスクロール位置を取得する関数
// --------------------------------------------------------------------------------
function WindowGetScrollPosition(window_obj){
	if(window_obj.pageXOffset === undefined){
	}else if(window_obj.pageYOffset === undefined){
	}else{
		return {
			x:window_obj.pageXOffset,
			y:window_obj.pageYOffset
		};
	}

	var d = window_obj.document;
	return {
		x:(d.documentElement.scrollLeft || d.body.scrollLeft),
		y:(d.documentElement.scrollTop  || d.body.scrollTop )
	};
}


// --------------------------------------------------------------------------------
// ポップアップ用エレメントを更新する関数
// --------------------------------------------------------------------------------
function PopupElementUpdate(){

	// CSSStyleDeclaration オブジェクトを取得
	var style = element_popup.style;

	// ドキュメントのクライアント領域のサイズを取得する
	var client_size = DocumentGetClientSize(document);

	// --------------------------------------------------------------------------------
	// クライアント領域のサイズから、エレメントのサイズを設定する場合
	// --------------------------------------------------------------------------------
//	var width_percent = 70;
//	var width_min = 300;
//	var width_max = 1000;

//	var width = client_size.width * (width_percent / 100);
//	if(width < width_min)	width = width_min;
//	if(width > width_max)	width = width_max;

//	style.width  = (width)  + "px";

	// --------------------------------------------------------------------------------
	// 中央に表示するための位置を計算する
	// --------------------------------------------------------------------------------
	// 現在のポップアップ用エレメントのバウンディングボックスのサイズを取得
	var rect = element_popup.getBoundingClientRect();
	var element_width  = rect.right - rect.left;
	var element_height = rect.bottom - rect.top;

	// 中央に配置するための位置を計算する（クライアント座標系）
	var element_x = (client_size.width  / 2) - (element_width  / 2);
	var element_y = (client_size.height / 2) - (element_height / 2);

	// ウィンドウのスクロール位置を取得する
	var scroll_pos = WindowGetScrollPosition(window);

	// 位置をグローバル座標系に変換する
	element_x += scroll_pos.x;
	element_y += scroll_pos.y;

	// エレメントを位置を修正する
	style.left = (element_x) + "px";
	style.top  = (element_y) + "px";

}

// ------------------------------------------------------------
// ポップアップ用エレメントを作成
// ------------------------------------------------------------
var element_popup = document.createElement("div");

// ------------------------------------------------------------
// スタイルを設定する
// ------------------------------------------------------------
var style = element_popup.style;
style.position = "absolute";
style.width  = "400px";
style.backgroundColor = "#fee";
style.border = "5px #866 solid";
style.borderRadius = "10px";
style.boxShadow = "5px 5px 10px #444";

// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(element_popup);

// ------------------------------------------------------------
// HTML 文字列を指定して、DOM オブジェクトをまとめて構築する
// ------------------------------------------------------------
element_popup.innerHTML = '' +
	'<div style="font-weight:bold; background:#866; color:#fff; padding:5px;">' +
	'	確認用ダイアログ' +
	'</div>' +
	'<div style="margin:10px; padding:20px; background:#fff; border:1px solid #888;">' +
	'	テスト用メッセージです。' +
	'</div>' +
	'<div style="margin:10px;">' +
	'	<input type="button" style="width:100%; height:50px;" value="了解">' +
	'</div>';


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// リサイズされるたびに実行されるイベント
	window.addEventListener("resize" , PopupElementUpdate);
	// スクロールされるたびに実行されるイベント
	window.addEventListener("scroll" , PopupElementUpdate);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// リサイズされるたびに実行されるイベント
	window.attachEvent("onresize" , PopupElementUpdate);
	// スクロールされるたびに実行されるイベント
	window.attachEvent("onscroll" , PopupElementUpdate);

}

// 初回更新
PopupElementUpdate();

６．エレメントを閉じる

エレメントの表示を止めるには、エレメントをノードリストから除外します。

■作成例

背景用エレメントと、ポップアップ用エレメントを組み合わせて、コンストラクタ関数にまとめた場合の例です。

AlertDialog クラスを用意して使用する


// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
	var b = document_obj.body;
	var r = document_obj.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(document_obj.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}

// --------------------------------------------------------------------------------
// ウィンドウのスクロール位置を取得する関数
// --------------------------------------------------------------------------------
function WindowGetScrollPosition(window_obj){
	if(window_obj.pageXOffset === undefined){
	}else if(window_obj.pageYOffset === undefined){
	}else{
		return {
			x:window_obj.pageXOffset,
			y:window_obj.pageYOffset
		};
	}

	var d = window_obj.document;
	return {
		x:(d.documentElement.scrollLeft || d.body.scrollLeft),
		y:(d.documentElement.scrollTop  || d.body.scrollTop )
	};
}

// --------------------------------------------------------------------------------
// 確認ダイアログ用のコンストラクタ関数
// --------------------------------------------------------------------------------
function AlertDialog(){

	// --------------------------------------------------------------------------------
	// プライベートな変数
	// --------------------------------------------------------------------------------
	var _this = this;
	var _element_popup = null;
	var _element_bg = null;

	// --------------------------------------------------------------------------------
	// 終了時に実行するイベント
	// --------------------------------------------------------------------------------
	this.onclose = null;

	// --------------------------------------------------------------------------------
	// メッセージを設定する
	// --------------------------------------------------------------------------------
	this.setMessage = function (str){

		// "alert_dialog_message" という ID 属性のエレメントを取得する
		var element_message = document.getElementById("alert_dialog_message");
		if(!element_message) return;

		// エレメントに文字列をセットする
		element_message.textContent = str;
	};

	// --------------------------------------------------------------------------------
	// 幅を設定する
	// --------------------------------------------------------------------------------
	this.setWidth = function (width){

		// CSSStyleDeclaration オブジェクトを取得
		var style = _element_popup.style;

		// エレメントを幅を変更
		style.width = (width) + "px";
	};

	// --------------------------------------------------------------------------------
	// 更新
	// --------------------------------------------------------------------------------
	function update(){
		var style;

		// ドキュメントのクライアント領域のサイズを取得する
		var client_size = DocumentGetClientSize(document);

		// 現在のポップアップ用エレメントのバウンディングボックスのサイズを取得
		var rect = _element_popup.getBoundingClientRect();
		var element_width  = rect.right - rect.left;
		var element_height = rect.bottom - rect.top;

		// 中央に配置するための位置を計算する（クライアント座標系）
		var element_x = (client_size.width  / 2) - (element_width  / 2);
		var element_y = (client_size.height / 2) - (element_height / 2);

		// ウィンドウのスクロール位置を取得する
		var scroll_pos = WindowGetScrollPosition(window);

		// 位置をグローバル座標系に変換する
		element_x += scroll_pos.x;
		element_y += scroll_pos.y;

		// CSSStyleDeclaration オブジェクトを取得
		style = _element_popup.style;

		// エレメントを位置を修正する
		style.left = (element_x) + "px";
		style.top  = (element_y) + "px";

		// CSSStyleDeclaration オブジェクトを取得
		style = _element_bg.style;

		// エレメントを位置を修正する
		style.left = (scroll_pos.x) + "px";
		style.top  = (scroll_pos.y) + "px";

		// エレメントをサイズを修正する
		style.width  = (client_size.width)  + "px";
		style.height = (client_size.height) + "px";
	}

	// --------------------------------------------------------------------------------
	// 解放
	// --------------------------------------------------------------------------------
	function release(){
		var parent;

		// ------------------------------------------------------------
		// イベントのリッスンを終了する
		// ------------------------------------------------------------
		// イベントリスナーに対応している
		if(window.removeEventListener){

			// リサイズされるたびに実行されるイベント
			window.removeEventListener("resize" , update);
			// スクロールされるたびに実行されるイベント
			window.removeEventListener("scroll" , update);

		// アタッチイベントに対応している
		}else if(window.detachEvent){

			// リサイズされるたびに実行されるイベント
			window.detachEvent("onresize" , update);
			// スクロールされるたびに実行されるイベント
			window.detachEvent("onscroll" , update);

		}

		// ------------------------------------------------------------
		// エレメントを、ノードリストから除外する
		// ------------------------------------------------------------
		parent = _element_popup.parentNode;
		if(parent){
			parent.removeChild(_element_popup);
		}
		parent = _element_bg.parentNode;
		if(parent){
			parent.removeChild(_element_bg);
		}

	}

	// --------------------------------------------------------------------------------
	// 初期化
	// --------------------------------------------------------------------------------
	(function (){
		var style;

		// ------------------------------------------------------------
		// 背景用エレメント
		// ------------------------------------------------------------
		// エレメントを作成
		_element_bg = document.createElement("div");

		// スタイルを設定
		style = _element_bg.style;
		style.position = "absolute";
		style.backgroundColor = "#000";
		var opacity = 0.5;
		style.opacity = opacity;
		style.filter = "alpha(opacity=" + (opacity * 100) + ")";

		// BODY のノードリストに登録する
		document.body.appendChild(_element_bg);

		// ------------------------------------------------------------
		// ポップアップ用エレメント
		// ------------------------------------------------------------
		// ポップアップ用エレメントを作成
		_element_popup = document.createElement("div");

		// スタイルを設定する
		style = _element_popup.style;
		style.position = "absolute";
		style.width  = "400px";
		style.backgroundColor = "#fee";
		style.border = "5px #866 solid";
		style.borderRadius = "10px";
		style.boxShadow = "5px 5px 10px #444";

		// BODY のノードリストに登録する
		document.body.appendChild(_element_popup);

		// ------------------------------------------------------------
		// HTML 文字列を指定して、DOM オブジェクトをまとめて構築する
		// ------------------------------------------------------------
		_element_popup.innerHTML = '' +
			'<div style="font-weight:bold; background:#866; color:#fff; padding:5px;">' +
			'	確認用ダイアログ' +
			'</div>' +
			'<div id="alert_dialog_message" style="margin:10px; padding:20px; background:#fff; border:1px solid #888;">' +
			'</div>' +
			'<div style="margin:10px;">' +
			'	<input type="button" id="alert_dialog_button" style="width:100%; height:50px;" value="了解">' +
			'</div>';

		// ------------------------------------------------------------
		// クリック時に実行されるイベント
		// ------------------------------------------------------------
		// "alert_dialog_button" という ID 属性のエレメントを取得する
		var element_button = document.getElementById("alert_dialog_button");
		element_button.onclick = function (){

			// コールバック関数を実行
			if(_this.onclose){
				_this.onclose();
			}

			// 解放
			release();
		};

		// ------------------------------------------------------------
		// イベントのリッスンを開始する
		// ------------------------------------------------------------
		// イベントリスナーに対応している
		if(window.addEventListener){

			// リサイズされるたびに実行されるイベント
			window.addEventListener("resize" , update);
			// スクロールされるたびに実行されるイベント
			window.addEventListener("scroll" , update);

		// アタッチイベントに対応している
		}else if(window.attachEvent){

			// リサイズされるたびに実行されるイベント
			window.attachEvent("onresize" , update);
			// スクロールされるたびに実行されるイベント
			window.attachEvent("onscroll" , update);

		}

		// 更新
		update();
	})();
}

// --------------------------------------------------------------------------------
// AlertDialog クラスを使用する
// --------------------------------------------------------------------------------
// 確認用ダイアログを生成
var alert_dialog = new AlertDialog();

// 幅を設定する
alert_dialog.setWidth(500);

// メッセージをセット
alert_dialog.setMessage("テスト用メッセージです。");

// 終了時に実行されるイベント
alert_dialog.onclose = function (){
	console.log("閉じられた。");
};

上に戻る

前のページに戻る