2011年02月03日


showModalDialog の使い方と使う場所

昨今の事情では、jQuery UI のモーダルダイアログを使用するほうがよさそうです。

WEB では一般のテキストエリア毎に機能を持たすより、拡張入力としてテキストエリアを入力する為だけのダイアログを表示させるといいと思います。

※ 単純にページを用意する場合は同一ドメインである必要があります
※ Opera では、showModalDialog を使う事はできません
※ Chrome 36では、window.showModalDialogが削除されるようです

テストページ

http://toolbox.winofsql.jp/sample/callModalDialog.htm

このテストページでは、「参照」ボタンにより現在の内容がダイアログに転送されて、テキストエリア入力が可能になり、ダイアログ側で変更した後に、「OK」ボタンで元のテキストエリアに変更したデータが転送されます。

このダイアログ内では、テキストエリア内で TAB キーが有効で、選択した状態で TAB キーを使うと一括で全ての行に TAB を挿入します。
( SHIFT+TAB で TAB を削除 )

呼び出す側のページ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<title>モーダルダイアログの呼び出し</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:600px;
	height:200px;
}
</style>
<script type=text/javascript>
// *********************************************************
// 参照用ダイアログを開く
// 
// path へ引き渡す値として、
// 1) win	: このウインドウオブジェクト
// 2) target	: 値を戻してほしい id の文字列
// 3) val	: その id にセットされている現在の値
// *********************************************************
function openModalDialog(path,id) {

	var win_param = "";

	win_param += "dialogHeight:450px;";
	win_param += "dialogWidth:720px;";
	win_param += "dialogLeft:200px;";
	win_param += "dialogTop:200px;";

	window.showModalDialog(
		path,
		{ win: window,target: id, val: document.getElementById(id).value },
		win_param
	);
}

</script>
</head>
<body>
<input type="button" value="参照" onclick='openModalDialog("modalDialog.htm", "text")'>
<br>
<textarea id="text">
function dialog_opener_access() {
	try {
		// 処理
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		win.document.getElementById(target).value =
			document.getElementById("text").value
		window.close();
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
}
</textarea>

<br><br><br>
※ Opera は showModalDialog が使えません
</body>
</html>


呼び出す場合に注意するのは第二引数で、JavaScript のオブシェクトが渡せます。つまり、{} による JSON データを引き渡す事ができるので自由に多くのやり取りが可能になります。

呼び出される側のページ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<title>モーダルダイアログ</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:700px;
	height:400px;
}
</style>
<script	type="text/javascript" src="http://lightbox.on.coocan.jp/tabtextarea.js"></script>
<script type=text/javascript>
function dialog_opener_access() {
	try {
		// 処理
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		win.document.getElementById(target).value = document.getElementById("text").value
		window.close();
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
}
</script>
</head>
<body>
<input type="button" value="OK" onclick='dialog_opener_access()'>
<br>
<script type="text/javascript">
createTabTextArea("text",100,12,"toolbox","width:700px;font-size:13px;","title=\"タブキーが有効です\"");
</script>

<script type=text/javascript>
(function () {
	try {
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		document.getElementById("text").value = window.dialogArguments.val;
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
})();
</script>

</body>
</html>

関連する記事

クロスドメインで、showModalDialog を使用する


posted by at 12:10 | Comment(0) | ちょっと特別な JavaScript | このブログの読者になる | 更新情報をチェックする


この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。