昨日、「Facebox 1.2 - LightBox風に角丸で画像をポップアップ」という記事に次のようなコメントをいただいたので、その対処法を考えてみました。

そんな中、もう一つだけ困ったことが出てきてしまいました。 絶対にプルダウンリストが必要な画面で使いたいのですが、 IE6のバグでプルダウンが前面に表示されてしまうのです...。 サンプルにプルダウンを付けてみました。(IE6のみ変なようです)

Google で調べてみると、どうやらこれはIE6のバグのようですね。

その対処法としては、iframe要素を使う方法とvisibility: hidden;を使う方法があるようですが、今回はHTMLには手を加えないで済むようにvisibility: hidden;でIE6でもFacebox 1.2が使えるようにしてみます。

まず、この問題が起こるのはIE6だけということなので、CSSに次の記述を加えます。

* html select.hide {　visibility: hidden;　}

これで、「IE6でhideというクラス名のselect要素は非表示」になります。

ということは、facebox.jsで画像をオーバーレイ表示している間だけ、select要素にhideというクラス名を付ければいいことになります。

そこで、facebox.jsの115、116行目当たりに次の１行を挿入します。

loading: function() {　// 115行目
  init()　// 116行目
  $('select').addClass('hide'); // 挿入

さらに、facebox.jsの後ろから5、6行目当たりに次の１行を挿入します。

hideOverlay() // 後ろから6行目
$('#facebox .loading').remove() // 後ろから5行目
$('select').removeClass('hide'); // 挿入

これで、facebox.jsが呼び出されたときにselect要素にhideクラスが付き、閉じるときにhideクラスが削除されます。

以上です。