昨今の事情では、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 を使用する
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
