中で自由にいろいろ扱えるダイアログ(？)を使うには

http://www.athome.co.jp/bklist?ITEM=ks&ART=13&AR …
こちらを開くと、いきなり中心に何かが開きますが、
この何かは、「地域から探す」の「市区郡」の「変更」を押すと開くダイアログです。

この何かというのはダイアログというのですか？
チェックボックスやＤＢ、画像、CSS、Javascriptなど自由にやっているようですが、
こちらと同じようなことをしたいです。
背景が暗くなるなど、凄く難しいでしょうか。
参考にできるサイトはありませんか？

こういったサイトをみつけましたが、
http://css-eblog.com/javascript/floating-popup-w …
iframeはSSLなどを使わないとマズイ的なことが紹介されていましたので、
iframeを使わずに実現したいと考えています。

ドンピシャなライブラリがあればいいですが、できれば自作したいと思っています。

No.2 ベストアンサー 回答者： tracer 回答日時： 2012/06/30 22:25

今回の説明でパッと思いつかないとなると、おそらく自作での実装は難しいでしょう。

また、ダイアログ表示だけなら探せばライブラリが見つかるかもしれませんが、サーバー連携してるフィットなライブラリを探すのはかなり骨が折れるでしょう。

念のため、ダイアログ部分のみのライブラリデモをのせておきますね。
http://jqueryui.com/demos/dialog/


以下はダイアログからサーバーへ通信するものを自作する場合です。
たとえば↓のようなダイアログを示す要素があったとします。

<div id="dialog">
　ダイアログの中身
</div>



ダイアログを配置する方法
HTML/CSSのみで完結する簡単なことなので調べてください。(とても基本的なことです)　逆にここが分からないとなると、以降の内容はもっと分からないと思います。

ダイアログの表示・非表示を切り替える
#dialogのdisplayの値をJavaScriptから切り替えるだけです。
これもほとんどHTML/CSSレベルの話です。

サーバーからデータを読み込む(DB参照)
ajaxを使うのがシンプルです。jQueryというJavaScriptのフレームワークを使用すると比較的簡単にajaxを操作できます。
JavaScript→サーバーサイドプログラム→JavaScriptの通信の繰り返しになります。サーバーから受け取ったデータを、JavaScriptでHTMLに挿入します。

サーバーサイド
JavaScriptからの要求に応答します。ご質問に応えるダイアログを実装するには、このサーバープログラムがあることが前提です。サーバーサイドを触ったこともない場合は、そもそも自作は無理でしょう。

この回答へのお礼

そうですか、わかりました。
有難うございました。

お礼日時：2012/07/03 10:10

No.1 回答者： tracer 回答日時： 2012/06/30 05:01

何がやりたいのかは分かりますが、何が分からないのかがわかりません。

逆に、どこまでご存知かがわかりません。

背景を暗くするのは、HTML/CSSレベルの話なので難しくないです。
ページ遷移せずにデータベースを参照するには、Ajaxを使うことになると思います。
質問から読み取れたのはこれくらいでした。すいません。
HTML/CSSをご存知ない(背景を暗くする方法をご存知なかったという意味で)となると、見よう見まねでの自作は難しいですね。特にAjaxの箇所。

この回答へのお礼

ダイアログ（？）そのものの出し方が分かりません。
枠そのものを作って、その中に表示する内容は、html,css,php,phpからmysqlへ接続,で通常通りにファイルを作っておいて、ajaxのopenメソッドでそのファイルを開く、ということになるのでしょうか。

お礼日時：2012/06/30 14:55