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

2014/03/24 13:18

このQ&Aのポイント

モーダルダイアログウィンドウを使わない設計がいいと思いますが、どのような仕組みに変えた方がよいでしょうか。
現在メンテナンスを担当しているWebアプリがモーダルダイアログウィンドウを多用しています。しかし、ブラウザの挙動によって異なり、将来的に廃止される可能性があるため、改修が必要です。
モーダルダイアログウィンドウを使わないような設計に変更する際には、選択した商品情報を保持したまま遷移する仕組みが必要です。ご意見をお聞かせください。

koshinohikariri
お礼率55% (5/9)

JavaScript
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2014/03/24 18:10 回答No.3

以下サンプルとして超雑にかいておきます。あくまでフローをみるサンプルなのではしょっているのでそのままでは実用には耐えないと思います（たぶん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で処理しても同じような感じになると思います

質問者

お礼 2014/03/28 15:57

お礼が遅くなって申し訳ありません。チャチャッとプログラムを作ってしまうなんてスゴイですね。開いたウィンドウの中にAjaxを仕込めばDBからデータをもってこれそうですね。具体的に例示して頂き、本当にありがとうござました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

tracer
ベストアンサー率41% (255/621)

2014/03/25 00:12 回答No.4

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

質問者

お礼 2014/03/28 15:56

お礼が遅くなり、申し訳ありません。 jQueryのライブライかなんかを参考にしながら、いろいろやってみようと思います。貴重なアドバイスありがとうございました。

ログインすると、全ての回答が全文表示されます。

yambejp
ベストアンサー率51% (3827/7415)

2014/03/24 14:25 回答No.2

そうですね、モーダルは挙動が怪しいのでクライアントの環境を限定しないとさいあく入力ができなくなる可能性もあります今風にかくならやはりajaxで入力枠を非同期にもってくることですねあとは月並みですが別windowをopenするのが常套でしょう（場合によって裏に入ってしまう可能性はしかたないとして）社内向けの処理なら割り切ってフレーム処理でお茶を濁すこともできます（環境さえ許せばこれが一番確実）

質問者

お礼 2014/03/24 15:48

早速の回答ありがとうございます。私は、伝票画面の下の方に、Ajax検索した商品一覧を貼り付けようかと考えたんですが、ダサすぎますし、すごく長い画面になって使いにくそうです。フレーム処理は・・・好き嫌いの問題で恐縮ですが、ちょっと考えにくいです。「別windowをopenする」は「target="_blank"」ですね。確かにこれが普通でしょうか？選択画面である商品一覧画面の方を大きくしないといけない、ということですね。というかタブブラウザならいいわけですね。「ajaxで入力枠を非同期にもってくる」が初級者の私にはちょっと理解できませんでした。現在も結構Ajaxは使っていて、多少なじみはあるんですが、もう少し詳しく教えて頂けないでしょうか。よろしくお願いします。

ログインすると、全ての回答が全文表示されます。

askaaska
ベストアンサー率35% (1455/4149)

2014/03/24 13:58 回答No.1

こんなのはどお？今までの仕様・ボタンをクリックすると、モーダルダイアログが出て、そのうえでいろいろ操作するこれからの仕様・ボタンをクリックすると、既存の画面の上に画面をdisplayするうーん、わかりにくいかも lightboxを画像の代わりにHTMLを表示する感じ？これで伝わるかしら？

質問者

お礼 2014/03/24 15:49

さっそくの回答ありがとうございました。 lightboxですか。カッコよさそうですね。業務用で全般にダサい作りとなっている（デザインも含めて）ここだけカッコよくなるのも面白いですね。 lightboxを使ったことがないんでゼンゼンわからないんですが、開いたLightboxから returnValue のような感じで、メイン画面に値を渡すことができるんでしょうか？そして渡した後Lightboxを閉じることもできるんでしょうか？もう少し詳しく教えて頂けるとウレシイです。よろしくお願いします。

質問者