- ベストアンサー
モーダルダイアログウィンドウの改修方法
- モーダルダイアログウィンドウを使わない設計がいいと思いますが、どのような仕組みに変えた方がよいでしょうか。
- 現在メンテナンスを担当しているWebアプリがモーダルダイアログウィンドウを多用しています。しかし、ブラウザの挙動によって異なり、将来的に廃止される可能性があるため、改修が必要です。
- モーダルダイアログウィンドウを使わないような設計に変更する際には、選択した商品情報を保持したまま遷移する仕組みが必要です。ご意見をお聞かせください。
- koshinohikariri
- お礼率55% (5/9)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
以下サンプルとして超雑にかいておきます。 あくまでフローをみるサンプルなのではしょっているので そのままでは実用には耐えないと思います （たぶん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で処理しても同じような感じになると思います
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
一般的にはモーダルウィンドウは自作すると思いますよ。 まったく難しくないですし。 単に要素をウィンドウ風にデザインして、その要素を表示・非表示にするだけです。 そのjavascriptが分からないと言われてしまうと、回答のしようがありません。。
お礼
お礼が遅くなり、申し訳ありません。 jQueryのライブライかなんかを参考にしながら、 いろいろやってみようと思います。 貴重なアドバイスありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
そうですね、モーダルは挙動が怪しいのでクライアントの環境を限定しないと さいあく入力ができなくなる可能性もあります 今風にかくならやはりajaxで入力枠を非同期にもってくることですね あとは月並みですが別windowをopenするのが常套でしょう （場合によって裏に入ってしまう可能性はしかたないとして） 社内向けの処理なら割り切ってフレーム処理でお茶を濁すこともできます （環境さえ許せばこれが一番確実）
お礼
早速の回答ありがとうございます。 私は、伝票画面の下の方に、Ajax検索した商品一覧を貼り付けようかと 考えたんですが、ダサすぎますし、すごく長い画面になって使いにくそうです。 フレーム処理は・・・ 好き嫌いの問題で恐縮ですが、ちょっと考えにくいです。 「別windowをopenする」は「target="_blank"」ですね。 確かにこれが普通でしょうか？ 選択画面である商品一覧画面の方を大きくしないといけない、ということですね。 というかタブブラウザならいいわけですね。 「ajaxで入力枠を非同期にもってくる」が初級者の私にはちょっと 理解できませんでした。 現在も結構Ajaxは使っていて、多少なじみはあるんですが、もう少し詳しく 教えて頂けないでしょうか。 よろしくお願いします。
- askaaska
- ベストアンサー率35% (1455/4149)
こんなのはどお？ 今までの仕様 ・ボタンをクリックすると、モーダルダイアログが出て、そのうえでいろいろ操作する これからの仕様 ・ボタンをクリックすると、既存の画面の上に画面をdisplayする うーん、わかりにくいかも lightboxを画像の代わりにHTMLを表示する感じ？ これで伝わるかしら？
お礼
さっそくの回答ありがとうございました。 lightboxですか。 カッコよさそうですね。 業務用で全般にダサい作りとなっている（デザインも含めて）ここだけ カッコよくなるのも面白いですね。 lightboxを使ったことがないんでゼンゼンわからないんですが、 開いたLightboxから returnValue のような感じで、メイン画面に 値を渡すことができるんでしょうか？ そして渡した後Lightboxを閉じることもできるんでしょうか？ もう少し詳しく教えて頂けるとウレシイです。 よろしくお願いします。
補足
失礼しました。ゴメンナサイ。 lightboxそのものを使うんではないのですね。 早トチリでした。 初級者なので、 「既存の画面の上に画面をdisplayする」の意味が理解できませんでした。 もう少しご説明お願いします。
お礼
お礼が遅くなって申し訳ありません。 チャチャッとプログラムを作ってしまうなんてスゴイですね。 開いたウィンドウの中にAjaxを仕込めばDBからデータを もってこれそうですね。 具体的に例示して頂き、本当にありがとうござました。