モーダルとポップアップ

Question

###前提・実現したいこと

phpを使ったWEBページで、
親画面から「検索ボタン」を押すと、モーダルかポップアップ画面が表示され、
その画面で、条件を入れて検索すると、検索結果が表示され、それを選択すると
親画面にデータが反映されるといったページを作りたい。

上記自体は、普通にJAVASCRIPTでポップアップして作ってますが、
それをモーダルっぽくしたいと考えています。

いろいろとサイトを探していますが、サンプルソースがなく、
困っています。

どなたか、ご存知ありませんでしょうか？
それとも不可能なのでしょうか？

bootstrap3で皆様には、ご支援頂いています。そのモーダルを
改造すればいいのかな？と軽い気持ちでいたのですが、モーダルと
ポップアップって根本的に違うということに気づきました。
が、実際に、そういうサイト（ページ）がある以上、何か方法が
あるのかな？と思い、投稿しました。

検索ワードやURLを教えて頂けると助かります。

そのWEBシステムで利用している言語？？は、
html php jquery javascript css mysql
です。

いつも、教えてばかりで恐縮ですが、お付き合い頂ける方、
よろしくお願いします。

Answer 1

特に気にせず「modal jquery」とかで検索して使いやすそうなものを選ぶといいかと思います。
とりあえず適当にリンク置いておきます。

モーダル ≪ JavaScript ≪ Bootstrap3日本語リファレンス
[JS]モーダルウインドウを設置するスーパーシンプルなスクリプト -leanModal | コリス

Comments

[tsuru0508]

ginさま　いつもありがとうございます。

モーダルで、iframeは使えるのなら、そのiframeの中で。。。
なんて考えましたが、親画面に値を返さないとダメなので、
そうすると、iframeも厳しそうだなと・・

onFoucsをうまいこと使ってみます。

[gin]

やったことないですけど、iframe扱えるんじゃないですかね。
Modalの仕組みってModal部分も同一html内に書かれてて単に非表示になってるだけです。

[tsuru0508]

なんとなく、おっしゃってる意味がわかってきました。

モーダルからiframeに指示を出して、モーダルが値を受け取れれば、
モーダル自体は、元の画面なので、親子関係が成立する？？かな？？

ちょっと調べてみます。

[gin]

アコーディオンみたいなものです。
あれもトグルクリックで出てきますよね。見せ方が違うだけ。
ところでページ分ける必要があるんですか？
PHPは疎いのでダメなのかも知れないですが1ページ内でやれそうな気がして。
他にもいろいろ別のところで分離したページを使ってたりするのかな？
仕様次第ですが…

[kei344]

To: tsuru0508さん
ここが参考になるかもしれません。

【iframeの親から子、子から親の操作をする | cly7796.net】
http://cly7796.net/wp/javascript/operation-of-iframe/

また、ginさんのおっしゃるようにモーダルで出す部分についても1ページ内に収めてしまえばiframeでの値のやり取りをせずに出来るような気がします。

[tsuru0508]

kei344さん

ありがとうございます。
１ページ内に収める方法も考えながらやってみます。

[tsuru0508]

ginさま、kei344さま

いつもありがとうございます。
おかげさまで、もう少しで完成するところまできました（テスト段階ですが）

bootstrapのmodalの部分の中身をiframeにして、
iframe内のphpページで検索を行い、その結果を
javascriptで親画面の関数に渡して、submitして
結果を反映させるという方法をとりました。

関数に値を渡して、reloadするところまでできたので、
あとは、表示する部分のコーディングです。

本当にいつもありがとうございます。
そして、これからもお願いします。