モーダルダイアログウィンドウの改修方法

解決済

質問者：koshinohikariri
質問日時：2014/03/24 13:18
回答数：4件

現在メンテナンスを担当しているWebアプリが
モーダルダイアログウィンドウ（showModalDialog）を多用しています。

このシステムは画面は jsp と javascript で、後ろはJavaです。

特に、伝票の入力処理では各行の商品IDを入力するときにモーダルダイアログウィンドウ
が開いて商品一覧が表示され、その中から商品を選択すると親画面に戻って商品情報が
表示される、という仕組みになっています。

親画面自体は開かれたままなので、画面遷移の考慮をしないで済む、という点では
シンプルなプログラムになっています。

ところがこの「showModalDialog()」、ブラウザによって若干挙動が異なったり、
将来廃止されるらしい、とのことで改造を迫られています。

モーダルダイアログウィンドウを使わない設計がいいとは思うんですが、
どのような仕組みに変えた方がよいでしょうか。

例えば画面遷移で商品を選択して戻るような仕組みにすると、途中まで入力した伝票情報を
すべて保持したまま遷移しなければなりません。

どのような仕組みがよいかご意見をお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2014/03/24 18:10

以下サンプルとして超雑にかいておきます。

あくまでフローをみるサンプルなのではしょっているので
そのままでは実用には耐えないと思います
（たぶんjQueryあたりを使えばもう少しらくにいけるとおもいます）

<html>
<head>
<script>
function test(){
var list={"":"選んでね!","x":"x","y":"y","z":"z"};
var nWin=document.createElement("div");
nWin.id="nWin";
var n=document.createTextNode("test");
nWin.appendChild(n);

var s=document.createElement("select");
for(var i in list){
var o=document.createElement("option");
o.setAttribute("value",i);
o.appendChild(document.createTextNode(list[i]));
s.appendChild(o);
}
s.onchange=function(){
document.getElementById("hoge").value=this.value;
nWin.parentNode.removeChild(nWin);
};
nWin.appendChild(s);

document.getElementsByTagName("body")[0].appendChild(nWin);
}
</script>
<style>
#nWin{
height:300px;
width:300px;
background-Color:red;
z-index:2;
position:absolute;
top:100px;
left:100px;
}
.testarea{
width:100%;
height:100px;
}
.yellow{background-Color:yellow;}
.lime{background-Color:lime;}
.aqua{background-Color:aqua;}
</style>
</head>
<body>
<div class="testarea yellow">test</div>
<div class="testarea lime">
<input type="text" name="hoge" id="hoge">
<input type="button" value="test" onclick="test()">
</div><div class="testarea aqua">test</div>
</body>

nWinをwindow.openで処理しても同じような感じになると思います

- 1
- 件

通報する

この回答へのお礼

お礼が遅くなって申し訳ありません。

チャチャッとプログラムを作ってしまうなんてスゴイですね。

開いたウィンドウの中にAjaxを仕込めばDBからデータを
もってこれそうですね。

具体的に例示して頂き、本当にありがとうござました。

通報する

お礼日時：2014/03/28 15:57

No.4

回答者： tracer
回答日時：2014/03/25 00:12

一般的にはモーダルウィンドウは自作すると思いますよ。

まったく難しくないですし。
単に要素をウィンドウ風にデザインして、その要素を表示・非表示にするだけです。
そのjavascriptが分からないと言われてしまうと、回答のしようがありません。。

- 2
- 件

通報する

この回答へのお礼

お礼が遅くなり、申し訳ありません。

jQueryのライブライかなんかを参考にしながら、
いろいろやってみようと思います。

貴重なアドバイスありがとうございました。

通報する

お礼日時：2014/03/28 15:56

No.2

回答者： yambejp
回答日時：2014/03/24 14:25

そうですね、モーダルは挙動が怪しいのでクライアントの環境を限定しないと

さいあく入力ができなくなる可能性もあります

今風にかくならやはりajaxで入力枠を非同期にもってくることですね
あとは月並みですが別windowをopenするのが常套でしょう
（場合によって裏に入ってしまう可能性はしかたないとして）

社内向けの処理なら割り切ってフレーム処理でお茶を濁すこともできます
（環境さえ許せばこれが一番確実）

- 0
- 件

通報する

この回答へのお礼

早速の回答ありがとうございます。

私は、伝票画面の下の方に、Ajax検索した商品一覧を貼り付けようかと
考えたんですが、ダサすぎますし、すごく長い画面になって使いにくそうです。

フレーム処理は・・・
好き嫌いの問題で恐縮ですが、ちょっと考えにくいです。

「別windowをopenする」は「target="_blank"」ですね。
確かにこれが普通でしょうか？
選択画面である商品一覧画面の方を大きくしないといけない、ということですね。
というかタブブラウザならいいわけですね。

「ajaxで入力枠を非同期にもってくる」が初級者の私にはちょっと
理解できませんでした。
現在も結構Ajaxは使っていて、多少なじみはあるんですが、もう少し詳しく
教えて頂けないでしょうか。

よろしくお願いします。

通報する

お礼日時：2014/03/24 15:48

No.1

回答者： askaaska
回答日時：2014/03/24 13:58

こんなのはどお？

今までの仕様
・ボタンをクリックすると、モーダルダイアログが出て、そのうえでいろいろ操作する

これからの仕様
・ボタンをクリックすると、既存の画面の上に画面をdisplayする

うーん、わかりにくいかも
lightboxを画像の代わりにHTMLを表示する感じ？

これで伝わるかしら？

この回答への補足

失礼しました。ゴメンナサイ。

lightboxそのものを使うんではないのですね。

早トチリでした。

初級者なので、
「既存の画面の上に画面をdisplayする」の意味が理解できませんでした。

もう少しご説明お願いします。

補足日時：2014/03/24 15:53

通報する

- 0
- 件

通報する

この回答へのお礼

さっそくの回答ありがとうございました。

lightboxですか。
カッコよさそうですね。

業務用で全般にダサい作りとなっている（デザインも含めて）ここだけ
カッコよくなるのも面白いですね。

lightboxを使ったことがないんでゼンゼンわからないんですが、
開いたLightboxから returnValue のような感じで、メイン画面に
値を渡すことができるんでしょうか？
そして渡した後Lightboxを閉じることもできるんでしょうか？

もう少し詳しく教えて頂けるとウレシイです。

よろしくお願いします。