画像やHTMLをポップアップ表示する、「thickbox」というjQueryライブラリがあります。

ThickBox 3.1

ウェブサイトでよく使われる演出をまとめた「yuga.js」に組み込まれているため、目にする機会が多くなりました。
今年の「ライジングサンロックフェスティバル」のサイトでも、アーティスト紹介に利用されています。

ですが先日、WEB屋ではない友人に
「ライジングサンのアーティスト写真の閉じ方がわからなかった」
と言われました。「右上に閉じるボタンがない」ため、戸惑ってしまったらしいです。

http://blog.webbingstudio.com/2009/07/rising_sun.html（後半）

私もこのブログの画像ポップアップに、thickboxを使っています。
確かにこれはわかりにくいです。

そこでこのように、閉じるボタンが右上に出るように改造してみました。
手順は追記以下で。

1. CSSの読み込み順を変える

もしhead内で「thickbox.css」を最後に読み込むようにしていたら、linkの順番を変えて自分のサイトのCSSが最後になるように直します。
これをしないと、thickboxの基本CSSを上書きできません。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />

2. thickbox.jsを直す

できれば元ライブラリはいじりたくないのですが、HTML出力部分の修正が必要です。

thickbox.js内、三か所に以下のような記述があるので

<a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key

こう書き換えます。

<a href='#' id='TB_closeWindowButton' title='Close'>X</a> close to Esc Key

閉じるのリンクを大文字の「X」にすることに抵抗がある方は、別途閉じるボタンを用意して、3.でCSSを追加するときに画像置換などで対応してください。

3. CSSを上書きする

自分のサイトのCSSに、以下の記述を追加します。

大文字のXにグロテスク系（文字の線全体に太さの差がない）のフォントを指定し、右上に絶対配置することで疑似的に「閉じるボタン」を作っています。

角丸のスタイルは、Firefox・Safari・Cromeのみ有効で、「幅÷2＋10%」くらいの値を指定すると、ほぼ丸になります。
Safari・Crome用の-webkit-border-radiusはショートハンドが有効にならないようです。上下左右個別に指定しなければならない点に注意してください。

IE6以降の主要ブラウザで確認済。
yuga.js・thickboxを使っている方はお試しください。

Twitterで記事を紹介して下さい（-人-）