以前の記事で
prototype.jsとjQueryがお互いに干渉しあってうまく動かないことを書いた。
現在の主流は断然jQueryだし、
本当にお手軽に様々なエフェクトが使えるjQuery。
もちろんLightbox（LightWindow）のようなこともおちゃのこさいさい。

いくつか同じ類いのjQuery用ライブラリがあるなかでも
以前から俺も利用していて
特にカスタマイズが容易である「fancybox」を取り上げたい。

fancybox（英語）

とりあえずfancyboxの公式ページのExampleで
試しにどういう開き方をするのかチェックしてみてほしい。
CSSを変更することでいかようにもカスタマイズできるのはもちろん、
特に便利なのはページ全体にオーバー表示される部分が
通常だったら黒の半透明だけなところを
CSSを指定するのと同じくらい簡単に色変更が可能であること、
そしてその透明度も数値で指定も可能なのだ。

ちょっと覚え書き程度にもう少し追記。

fancyboxのデフォルト（標準）の設定では
横幅425px、縦幅355pxでボックスが表示される。
このサイズを変更するのはCSSをいじるのではなく、
HTML上に記載したfancyboxのjavascript記述部分で行う。

<script type="text/javascript">
$(document).ready(function() {
$("任意のid名").fancybox({
'padding'			: 0,
'autoScale'			: false,
'transitionIn'		: 'fade',
'transitionOut'		: 'fade',
});
});
</script>

サンプルとかではこれくらいだけ記述されている感じ。
このpaddingだのautoScaleだのある並びに設定すればよい。

横幅、縦幅なら

'width'         : 640,
'height'	: 400,

透明度と透過の色は

'overlayOpacity' : 0.7,
'overlayColor' : "#000000"

たったこれだけで簡単に雰囲気を変更することができる。
ボーダーの幅や色等はCSS側で変更すれば良い。
とりあえず覚え書きとしてはここまで。