コメントに返信
jQuery プラグイン Boxyは綺麗なダイアログを簡単に表示することができるプラグインです。
Boxy
http://plugins.jquery.com/project/boxyダイアログはコンテンツのサイズに合わせて自動的にサイズと位置が調節されますので、特に指定しなくてもＯＫです。通常のダイアログはマウスドラッグで移動することができます。4番目のサンプルのようにモーダルダイアログにすることも簡単にできます。
基本的な使い方は他のjQueryプラグインと同じように対象となる要素を指定して、boxy()関数をコールするだけです。以下の例では、.boxyクラスの要素(複数可)をダイアログとして表示するように指定しています。ここで注意するのはダイアログ化される要素がインラインの場合に、その要素が表示されてしまわないように、display: none;を指定して通常は見えないようにしておくことです。
- <script type='text/javascript'>
- $(function() {
- $('.boxy').boxy();
- });
- </script>
1. インラインコンテンツを表示 - テキスト
-
アンカー部のソース
- <script type='text/javascript'>
- $(function() {
- $('.boxy1').boxy({'title':'SAMPLE-1');
- });
- </script>
セレクターのDIV要素のソース
実行部のソース
2. インラインコンテンツを表示 - イメージ
-
アンカー部のソース
- <script type='text/javascript'>
- $(function() {
- $('.boxy2').boxy({'title':'SAMPLE-2');
- });
- </script>
セレクターのDIV要素のソース
実行部のソース
3. AJAXでリモートコンテンツを表示
-
アンカー部のソース
- <script type='text/javascript'>
- $(function() {
- $('.boxy3').boxy({'title':'SAMPLE-3');
- });
- </script>
実行部のソース
4. モーダルダイアログ
-
モーダルダイアログを作成するには、boxy()をコールする時に、オプションパラメータのmodalにtrueを指定してやるだけです。
- <script type='text/javascript'>
- $(function() {
- $('.boxy4').boxy({'title':'SAMPLE-4', 'modal':true);
- });
- </script>
アンカー部のソース
セレクターのDIV要素のソース
実行部のソース
尚、Boxyプラグインのインストール時に、stylesheets/boxy.cssファイルを若干修正する必要があります。
boxy-wrapperクラスの.top-left, .top-right, .bottom-left, .bottom-rightに使うコーナー画像ですが、IEではファイルをDocumentRootからの絶対パス指定してやらないとだめな為に、この部分のsrc='xxxxxxxx/images/boxy-nw.png' の部分(4カ所)を自分の設置場所に合わせて変更しなければなりません。これをしないと、IEでは角丸のコーナーが表示されない間の抜けたダイアログになってしまいます。
また、同じくboxy.cssの.boxy-content はpadding: 15pxとなっていますが、このサンプルではイメージなど隙間なくダイアログに表示するために、padding: 0pxに変更しています。
